svg 动图消耗大量 CPU资源

起因：之前使用手机浏览器访问网站，浏览着浏览着，感觉手机在微微发热，当时就挺好奇的，怎么用QQ聊天都没发热，看个网页反而发热了。昨天机缘巧合之下打开了手机上的CPU负载软件，发现浏览古黑论的时候，CPU占用高达100%以上。


经过：因为手机上不好做分析，我就用电脑来浏览，通过任务管理器来查看CPU的使用情况。使用排除法终于发现了罪魁祸首——SVG 动态文件。

✊🌡🍟☯🕊‏

单独打开这个 svg 文件，然后放着不动，CPU使用率就一直在 1% - 2%徘徊，我这可是电脑的CPU啊，型号是 AMD 的5600X，一般使用的时候频率都在跑在 4.1Ghz 左右，一个小小的文件就占用了 2% 的CPU资源。怪不得在手机上会占用那么多资源。

为什么一个小小的文件会占用那么多资源呢？
👍💈🍪🚭🦕‏
因为这个 svg 文件的动态的，会持续不断的重载画面，CPU一直在计算，然后再显示到屏幕上，没有停下来的休息的时候。

不仅是svg，其他需要代码计算的动态内容，也一样会占用 CPU 的资源。

🤛🎠🍞🆎🦠‍

结果：去掉svg后使用静态的图片，CPU占用降低一大半



所有的加载动画在不需要使用的时候，可以使用 display:none 来隐藏，否则就算不在屏幕上显示，也会占用大量的 CPU资源。
🖕🚐🍊♻🦋‎