zoukankan      html  css  js  c++  java
  • reflow和repaint

    Web页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验
      简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的:
      1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;
      2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
      3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
      4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;
      5. 浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
      6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;
      7. 浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它;
      8. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;
      9. 终于等到了</html>的到来,浏览器泪流满面……
      10. 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;
      11. 浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请

      求了新的CSS文件,重新渲染页面。

     reflow几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会reflow哪一部分的代码,它们都彼此相互影响着。

     reflow问题是可以优化的,我们可以尽量减少不必要的reflow。比如开头的例子中的<img>图片载入问题,这其实就是一个可以避免的reflow——给图片设置宽度和高度就可以了。这样浏览器就知道了图片的占位面积,在载入图片前就预留好了位置。

    另外,有个和reflow看上去差不多的术语:repaint,中文叫重绘。如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器repaint。repaint的速度明显快于reflow(在IE下需要换一下说法,reflow要比repaint 更缓慢)。下次将通过一系列的实验说明在Firefox、IE等浏览器下reflow的优化。 

    http://www.css88.com/archives/4996 重绘,回流和优化
    
    减少重绘和重排:

    开发中,比较好的实践是尽量减少重排次数和缩小重排的影响范围。例如:

      1. 将多次改变样式属性的操作合并成一次操作。例如,

      JS:

    var changeDiv = document.getElementById(‘changeDiv’);
    changeDiv.style.color = ‘#093′;
    changeDiv.style.background = ‘#eee’;
    changeDiv.style.height = ’200px’;

      可以合并为:
      CSS:

    div.changeDiv {
    background: #eee;
    color: #093;
    height: 200px;
    }

      JS:

    document.getElementById(‘changeDiv’).className = ‘changeDiv’;

      2. 将需要多次重排的元素,position属性设为absolute或fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

      3. 在内存中多次操作节点,完成后再添加到文档中去。例如要异步获取表格数据,渲染到页面。可以先取得数据后在内存中构建整个表格的html片段,再一次性添加到文档中去,而不是循环添加每一行。

      4. 由于display属性为none的元素不在渲染树中,对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示。这样只在隐藏和显示时触发2次重排。

      5. 在需要经常获取那些引起浏览器重排的属性值时,要缓存到变量。

      在最近几次面试中比较常问的一个问题:在前端如何实现一个表格的排序。如果应聘者的方案中考虑到了如何减少重绘和重排的影响,将是使人满意的方案。

  • 相关阅读:
    zoj 1239 Hanoi Tower Troubles Again!
    zoj 1221 Risk
    uva 10192 Vacation
    uva 10066 The Twin Towers
    uva 531 Compromise
    uva 103 Stacking Boxes
    稳定婚姻模型
    Ants UVA
    Golden Tiger Claw UVA
    关于upper、lower bound 的探讨
  • 原文地址:https://www.cnblogs.com/laiqun/p/5876437.html
Copyright © 2011-2022 走看看