如题,当我尝试访问一个带有动画效果的 svg 背景图片的网页时,CPU 占用率会达到 50% 以上,而同样的网页使用 Chrome 就没有这样的问题。
Firefox 版本 107.0.1 (64-bit),OS openSUSE 20221216,使用「Troubleshoot Mode」启动,开启默认的性能选项。
样本 svg 图像如下:
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink'
width='1440' height='560' viewBox='0 0 1440 560'>
<g mask='url("#aaa")' fill='none'>
<rect width='1440' height='560' x='0' y='0' fill='url(#aaa)'></rect>
<path d='M698 90.2262146816623L770.3102034820612 152 827 14.180623774186614z'
fill='rgba(255, 255, 255, 0.3)' class='tf1'></path>
</g>
<defs>
<mask id='aaa'></mask>
<style> @keyframes float1 { 0%{transform: translate(0, 0)} 50%{transform: translate(-10px,
0)} 100%{transform: translate(0, 0)} } .tf1 { animation: float1 5s infinite;}
</style>
</defs>
</svg>
以及引用它的 HTML 代码:
<! DOCTYPE html>
<html>
<head>
<style>
html { background-image: url("./pic.svg");}
</style>
</head>
</html>
我尝试了使用 Firefox Profiler 录制分析,但是看不懂,而我也仅仅是一个普通用户。大家是否也能够复现这个问题?还是说我需要修改 Firefox 的某些配置来使得它表现得更好一点?