前端性能提高技术之----HTML重绘篇

<img src="home.png" style="width:200px; height: 200px;">

        在HTML页面完成渲染后

，任何改动页面样式或结构的操作都会引起浏览器重绘，性能的损耗直接取决于动态改变的范围：如果只是改变一个元素的颜色之类的信息则只会重绘该元素；而如果是增删节点或调整节点位置则会引起其兄弟节点也一并重绘，所以在页面操作中要尽量减少页面重绘的次数，

 

 

基本原则如下：

1. 改动的DOM元素越深则影响越小，尽量深入到节点深处。
2. 对某些DOM样式有多重变动尽量合并到一起修改。
3. 显示的设置图片的宽度和高度。

如下面这种情形：

<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;">