软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > 改变img的原始尺寸会严重降低渲染速度

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

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

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


提示:可修改后代码再运行!

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

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

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

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

    相关阅读
    网友评论
    栏目导航
    推荐软件