js性能-DOM编程之重绘和重排

浏览器下载完页面中的所有组件----HTML标记，Js，CSS，图片等之后会解析并生成两个内部数据结构：

1.DOM树  -------- 表示页面结构
2.渲染树   -------- 表示DOM节点如何显示

      DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点（隐藏的DOM元素在渲染树中没有对应的节点）。
      渲染树中的节点被称为“帧“或者”盒“，符合CSS模型的定义，理解页面元素为一个具体填充(padding)，边距(marging)，边框(borders)和位置(position)的盒子。
      一旦DOM和渲染树构建完成，浏览器就开始显示(绘制"paint")页面元素。



     当DOM的变化影响了元素的几何属性(宽和高)，浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。

    重排：浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

    重绘：完成重排后，浏览器会重新绘制受影响的部分到屏幕中。


    重排何时发生：
        1.添加或删除可见的DOM元素
        2.元素位置的改变
        3.元素尺寸改变
        4.内容改变
        5.页面渲染器初始化
        6.浏览器窗口尺寸的改变

原文