不相信自己的人,连努力的价值都没有。 收藏本站
登陆 / 注册 搜索

阅读:152   回复: 1

svg 动图消耗大量 CPU资源

原创 [复制链接]
小执念 古黑浩劫论坛大牛 2022-9-10 00:32 |显示全部楼层

可遇不可求的事:故乡的云,上古的玉,随手的诗,十九岁的你。

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


经过:因为手机上不好做分析,我就用电脑来浏览,通过任务管理器来查看CPU的使用情况。使用排除法终于发现了罪魁祸首——SVG 动态文件。
👮‍♂️💎🛋😋🦷🚈🥑☣🐢
svg 动图消耗大量 CPU资源 电脑对比.jpg

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

为什么一个小小的文件会占用那么多资源呢?🧑‍🚀👠🪓😊🤙🎠🍭📵🕊

因为这个 svg 文件的动态的,会持续不断的重载画面,CPU一直在计算,然后再显示到屏幕上,没有停下来的休息的时候。
  1. https://cdn.ghcdn.net/img/chart-mobile.svg
复制代码

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

👩👠🎷🤐🙏🌞🥭🈳🐅结果:去掉svg后使用静态的图片,CPU占用降低一大半

svg 动图消耗大量 CPU资源 手机对比.jpg

所有的加载动画在不需要使用的时候,可以使用 display:none 来隐藏,否则就算不在屏幕上显示,也会占用大量的 CPU资源。
🧒🩴🎺🤪🖕🌦🌶™🐴
上一篇
下一篇
帖子热度 162 ℃

風見名哲 「初入古黑」 2022-9-10 00:32 |显示全部楼层

这个用户很懒,还没有填写自我介绍呢~

我只是路过,不发表意见……
您需要登录后才可以回帖 登录 | 免费注册  

本版积分规则

快速回复 返回列表