Raindan 2016-09-28
<img src="home.png" style="width:200px; height: 200px;">
在HTML页面完成渲染后
,任何改动页面样式或结构的操作都会引起浏览器重绘,性能的损耗直接取决于动态改变的范围:如果只是改变一个元素的颜色之类的信息则只会重绘该元素;而如果是增删节点或调整节点位置则会引起其兄弟节点也一并重绘,所以在页面操作中要尽量减少页面重绘的次数,
基本原则如下:
如下面这种情形:
<a href="javascript:void(0);" id="example">传统的代码</a> <script> var example = document.getElementById("example"); example.ondblclick = function() { example.style.backgroundColor = "red"; example.style.width = "200px"; example.style.color = "white"; } </script>
对页面元素进行三次样式修改操作,会引发三次页面重绘,而采用下面的方式则只会引发一次重绘即可完成:
<style> .dblClick { width: 200px; background: red; color: white; } </style> <a href="javascript:;" id="example">CSS优化的代码</a> <script> var example = document.getElementById("example"); example.ondblclick = function() { example.className = "dblClick"; } </script>
HTML里的图片没有指定尺寸(宽和高),或者代码描述的尺寸与实际图片的尺寸不符时,浏览器则要在图片下载完成后再“回溯”该图片并重新显示,这会消耗额外时间,因此显示的指定图片的宽度和高度可以减少页面“回溯”消耗。
<img src="home.png" style=" width: 200px; height: 200px;">