改变img的原始尺寸会严重降低渲染速度

发布时间：2018-10-04 13:52 所属栏目：30 来源：站长网

导读：最近在修改一个游戏框架时发现页面渲染效率骤降，CPU从原先的10%左右上升到50%（一个核已经满负载了），FPS也下降不少。经过一番调试，发现是其中的一个img元素引起的。和页面里其他img元素不同之处在于，这个图片的尺寸是通过脚本缩放的，难道图片的尺寸

　　最近在修改一个游戏框架时发现页面渲染效率骤降，CPU从原先的10%左右上升到50%（一个核已经满负载了），FPS也下降不少。经过一番调试，发现是其中的一个img元素引起的。和页面里其他img元素不同之处在于，这个图片的尺寸是通过脚本缩放的，难道图片的尺寸会影响渲染效率吗？下面来测试下。

　　这里选择一幅600*400的图片，让它随鼠标移动，以此可以产生频繁的渲染。

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>IMG尺寸-效率测试</title> <style> html {overflow: hidden} #pic {position: absolute} </style> </head> <body> <img id="pic" width="600" height="400" src="/uploads/allimg/1111/" /> <script> var sty = document.getElementById("pic").style; document.onmousemove = function(e) { e = e || event; sty.left = e.clientX + "px"; sty.top = e.clientY + "px"; } </script> </body> </html>
提示：可修改后代码再运行!

　　可以发现，即使剧烈的晃动鼠标，CPU也仅仅耗了一点点而已。然而，对上述的代码做一点点微小的改动，把height="400"改成401，然后再次测试，这时CPU就直接飙升到了一半，（单核的话估计满满的100%）。

由此可以推断，浏览器对同一张图片数据在内存里只有1个缓存，即便是尺寸被修改过的。所以在渲染到那些被缩放过的图片时，每次都需要进行一次缩放处理。事实上，这些缩放处理是很复杂的，它并非简简单单的将像素拉开或缩小，而是通过一些复杂的算法，进行模糊平滑处理。你也应该看到过，小图放大后，会出现不少过度的颜色值，让人感觉不是那么的生硬。

　　同样，使用CSS的width和height属性缩放图片，也会出现此现象。更进一步，用IE专有的zoom属性，以及CSS3的transform:scale缩放，不论是img元素，还是带背景图片的div元素，都是如此。即使用CSS3的background-size改变背景图片大小，还是一样。

在其他浏览器上测试，只有Opera在缩放后CPU没有太大的影响，可能是浏览器对缩放后的图像保存在一个副本里了。

（编辑：ASP站长网）