css 动画很耗cpu啊
工作中在做云盘性能优化时,发现云盘里面的loading组件不应该用 nd-rc/lib/spinner这个组件的加载效果是用 css动画实现的云盘只要打开一个有很多图片的目录 cpu瞬间飙到100多,图片多到一定量时整个浏览器都会卡住,一个小小的css动画 放到到几百个也是很占cpu资源的下面是页面打开一个图片的目录不做任何操作 页面cpu稳定在80左右。
去掉spinner插件 cpu占用一下就下去了
这个 nd-rc 里面的 spinner最终是css动画渲染出来的加载效果 这种加载效果不适合在云盘中使用 个人感觉要换成gif图片的形式
开始还以为是我哪个地方写成死循环了 找来半天发现是css动画的原因导致浏览器卡住的。
gif 好像也有帧的概念 换成gif后 cpu还是会占用一点 但没有css那个多了,看了下百度网盘直接用的是图片没加载完成时直接用的是静态图片。
换成静态图片的效果 cpu基本是0
页面渲染差异对比css 渲染
css 渲染
gif图片
静态图片
对于页面中出现的大量加载效果,为了页面性能考虑还是换成静态图片是最好的
其他
另外云盘的优化还涉及到下面两点
- 滚动条事件去抖动,不去抖动的话,滚动事件触犯太频繁
- 加载图片的时候每只加载视口区的图片,滚动条滚动到哪里才开始请求对应的图片