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

Raindan 2016-09-28

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

相关推荐