重绘(Repaint)和回流(Reflow)

 1、回流和重绘只是渲染步骤的一小节,是怎么做到影响性能的?

  css 会影响 javascrip 执行时间导致 javascript 脚本变慢

复制代码
浏览器渲染一个网页的时候会启用两条线程: 一条渲染javascript 脚本,另一条渲染 ui 即css 样式的渲染。  但这两条线程是互斥的。当javascript 线程运行的时候 ui 线程则会中止暂停,反之亦然。  那这是为什么呢?  原因是,当ui 线程运行对页面进行渲染的时候 js 脚本难免会涉及到页面视图上的一些样式的改变,
为了使这个改变更加准确 js 脚本只好等待ui 线程渲染完成的时候才去执行。 所以当一个页面的元素样式改动频繁的时候ui 线程就会持续渲染,造成js 代码反应慢半拍,卡顿的情况。
复制代码

 


 

 

2、什么是回流?什么是重绘?

  a、回流:布局或者几何属性需要改变就称为回流。

              当render tree 的一部分或全部的元素因改变了自身的宽高,布局,显示或隐藏,

                或者元素内部的文字结构发生变化 导致需要重新构建页面的时候,回流就产生了

 

  b、重绘:重绘是当节点需要更改外观而不会影响布局的,比如改变 color 就叫称为重绘。

            当一个元素自身的宽高,布局,及显示或隐藏没有改变,而只是改变了元素的外观风格的时候,就会产生重绘。

                    例如你改变了元素的background-color

 

  c、因此,回流必定会发生重绘,重绘不一定会引发回流

           回流所需的成本比重绘高的多,改变深层次的节点很可能导致父节点的一系列回流。

     所以以下几个动作可能会导致性能问题:     

                 1>改变 window 大小

                 2>改变字体

                 3>添加或删除样式

       4>文字改变

       5>定位或者浮动

         6>盒模型

  


 

3、什么会引起回流?

     

   大概分为五类:

    a、首当其冲自然是dom树结构变化,比如你删除或者添加某个node.

    b、元素几何属性变化,包括margin,padding,height,width,border等

    c、页面渲染初始化

    d、获取某些属性(offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE))

    e、浏览器窗口发生变化-resize事件发生时

复制代码
var s = document.body.style; s.padding = "2px"; // 回流+重绘s.border = "1px solid red"; // 再一次 回流+重绘s.color = "blue"; // 再一次重绘s.backgroundColor = "#ccc"; // 再一次 重绘s.fontSize = "14px"; // 再一次 回流+重绘 // 添加node,再一次 回流+重绘document.body.appendChild(document.createTextNode('abc!'));
复制代码

 


关键字:
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信