jsDOM树中的重排和重绘 以及 DOM树是如何构建的

DOM树 ：  

首先是字节流，经过HTML解码器 解码之后是字符流，然后通过词法分析器会被解释成词语（Tokens），之后经过语法分析器构建成节点，最后这些节点被组建成一颗 DOM 树。

在 DOM 树构建完成后，WebKit 会触发 “DOMContentLoaded” 事件，当所有资源都被加载完成后，会触发 “onload” 事件。

重排：（重排次数多可能会导致浏览器垮掉而页面闪烁）

完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘。

添加或者删除可见的DOM元素

元素位置改变

元素尺寸改变

元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）

页面渲染初始化（这个无法避免）

浏览器窗口尺寸改变

优化：   

               例子：var ele = document.getElementById('myDiv');

                                 ele.style.borderLeft = '1px';

                                 ele.style.borderRight = '2px';

                                 ele.style.padding = '5px’;

            优化1. 重写style

                ele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;’;

            优化2. add style

                ele.style.cssText += ‘border-left: 1px;’

            优化3.use class

                ele.className = 'active’;

           优化4.fragment：

                如果添加两个子节点  先 var fragment  = document.creatDocumentFragment();

                将两个子节点添加到fragment.appendChild（）；再添加frag节点

            优化5 .让动画脱离文档流  

                将元素设置absolute可以脱离文档流 避免大部分元素重排

总结  

重排和重绘是DOM编程中耗能的主要原因之一，平时涉及DOM编程时可以参考以下几点：

1.尽量不要在布局信息改变时做查询（会导致渲染队列强制刷新）

2.同一个DOM的多个属性改变可以写在一起（减少DOM访问，同时把强制渲染队列刷新的风险降为0）

3.如果要批量添加DOM，可以先让元素脱离文档流，操作完后再带入文档流，这样只会触发一次重排（fragment元素的应用）

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