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资源。 💅🚐🍼🔞🐝
帖子热度 2329 ℃
|
|