改变img的原始尺寸会严重降低渲染速度
|
最近在修改一个游戏框架时发现页面渲染效率骤降，CPU从原先的10%左右上升到50%（一个核已经满负载了），FPS也下降不少。经过一番调试，发现是其中的一个img元素引起的。和页面里其他img元素不同之处在于，这个图片的尺寸是通过脚本缩放的，难道图片的尺寸会影响渲染效率吗？下面来测试下。 这里选择一幅600*400的图片，让它随鼠标移动，以此可以产生频繁的渲染。
可以发现，即使剧烈的晃动鼠标，CPU也仅仅耗了一点点而已。然而，对上述的代码做一点点微小的改动，把height="400"改成401，然后再次测试，这时CPU就直接飙升到了一半，（单核的话估计满满的100%）。 同样，使用CSS的width和height属性缩放图片，也会出现此现象。更进一步，用IE专有的zoom属性，以及CSS3的transform:scale缩放，不论是img元素，还是带背景图片的div元素，都是如此。即使用CSS3的background-size改变背景图片大小，还是一样。 在其他浏览器上测试，只有Opera在缩放后CPU没有太大的影响，可能是浏览器对缩放后的图像保存在一个副本里了。 （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
