你的位置:首页 > 网页设计

[网页设计]网页重绘和回流以及解决方法


浏览器呈现网页的处理流程图:


 2.让操作的元素进行“离线处理”,处理完后一次更新;

使用DocumentFragment进行缓存操作,引发一次回流和重绘;

使用display:none属性,只引发两次回流和重绘;

使用cloneNode(true or false)和replaceChild技术,引发一次回流和重绘。

3.不要经常访问会引起浏览器flush队列的属性,如果你确定要缓存,利用缓存;

  // 不好的写法  for(循环) {  el.style.left = el.offsetLeft + 5 + "px";  el.style.top = el.offsetTop + 5 + "px";  }     // 这样写好点  var left = el.offsetLeft,  top = el.offsetTop,  s = el.style;   for (循环) {   left += 10;   top += 10;   s.left = left + "px";   s.top = top + "px";   }

 4.让元素脱离动画流,减少回流的render tree的规模;

  $("#block1").animate({left:50});  $("#block2").animate({marginLeft:50});

5.尽可能在DOM树的最末端改变class(可限制回流的范围);

6.避免设置多层内联样式(将样式合并在一个外部类,仅产生一次回流);

7.动画效果应用到position属性为absolute或fixed的元素上(动画效果应用到position属性为absolute或fixed的元素上,它们不影响其他元素的布局,所它他们只会导致重新绘制,而不是一个完整回流。这样消耗会更低。);

8.牺牲平滑度换取速度(Opera还建议我们牺牲平滑度换取速度,其意思是指您可能想每次1像素移动一个动画,但是如果此动画及随后的回流使用了 100%的CPU,动画就会看上去是跳动的,因为浏览器正在与更新回流做斗争。动画元素每次移动3像素可能在非常快的机器上看起来平滑度低了,但它不会导 致CPU在较慢的机器和移动设备中抖动。);

9.避免使用table数据(在布局完全建立之前,table经常需要多个关口,因为table是个和罕见的可以影响在它们之前已经进入的DOM元素的显示的元素。);

10.避免使用css的JavaScript表达式(因为他们每次重新计算文档,或部分文档、回流。正如我们从所有的很多事情看到的:引发回流,它可以每秒产生成千上万次。)。

实例测试一:

测试代码不改变元素的规则,大小,位置。只改变颜色,所以不存在回流,仅测试重绘,代码如下:

  <body>    <script type="text/javascript">      var s = document.body.style;      var computed;      if (document.body.currentStyle) {       computed = document.body.currentStyle;      } else {       computed = document.defaultView.getComputedStyle(document.body, '');      }       function testOneByOne(){     s.color = 'red';;     tmp = computed.backgroundColor;     s.color = 'white';     tmp = computed.backgroundImage;     s.color = 'green';     tmp = computed.backgroundAttachment;    }        function testAll() {     s.color = 'yellow';     s.color = 'pink';     s.color = 'blue';          tmp = computed.backgroundColor;     tmp = computed.backgroundImage;     tmp = computed.backgroundAttachment;    }    </script>      color test <br />    <button onclick="testOneByOne()">Test One by One</button>    <button onclick="testAll()">Test All</button>  </body>

 实例测试二:

跟第一次测试的代码很类似,但加上了对layout的改变,为的是测试回流。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1  /DTD/xhtml1-transitional.dtd">  <html 

 避免回流和重绘的次数可从代码的角度来实现性能优化,因此我们在写代码时应尽量使用上诉方法来减少网页回流和重绘的次数。