最近在修改一个游戏框架时发现页面渲染效率骤降，CPU从原先的10%左右上升到50%（一个核已经满负载了），FPS也下降不少。经过一番调试，发现是其中的一个img元素引起的。和页面里其他img元素不同之处在于，这个图片的尺寸是通过脚本缩放的，难道图片的尺寸会影响渲染效率吗？下面来测试下。
这里选择一幅600*400的图片，让它随鼠标移动，以此可以产生频繁的渲染。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.guao.hk/wp-content/uploads/2010/06/google-chrome.jpg" />
<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>
同样，使用CSS的width和height属性缩放图片，也会出现此现象。更进一步，用IE专有的zoom属性，以及CSS3的transform:scale缩放，不论是img元素，还是带背景图片的div元素，都是如此。即使用CSS3的background-size改变背景图片大小，还是一样。
可以发现，即使剧烈的晃动鼠标，CPU也仅仅耗了一点点而已。然而，对上述的代码做一点点微小的改动，把height="400"改成401，然后再次测试，这时CPU就直接飙升到了一半，（单核的话估计满满的100%）。
由此可以推断，浏览器对同一张图片数据在内存里只有1个缓存，即便是尺寸被修改过的。所以在渲染到那些被缩放过的图片时，每次都需要进行一次缩放处理。事实上，这些缩放处理是很复杂的，它并非简简单单的将像素拉开或缩小，而是通过一些复杂的算法，进行模糊平滑处理。你也应该看到过，小图放大后，会出现不少过度的颜色值，让人感觉不是那么的生硬。
在其他浏览器上测试，只有Opera在缩放后CPU没有太大的影响，可能是浏览器对缩放后的图像保存在一个副本里了。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦