一、浏览器渲染原理

上图我们可以看出，浏览器会解析三个模块：

• HTML,SVG,XHTML，解析生成DOM树。
• CSS解析生成CSS规则树。
• JavaScript用来操作DOM API和CSSOM API，生成DOM Tree和CSSOM API。

二、什么情况下会造成重排重绘？

重排：元素的宽高，位置发生了变化。需要重新验证计算 Render Tree.一旦某一个节点发生重排的话，可能会引起子元素、父元素、兄弟元素的位置发生变动，所以重排的成本，性能消耗很高。

以下操作会导致重排或重绘。

• 删除，增加，或者修改DOM元素节点。
• 移动DOM的位置，开启动画的时候。
• 修改CSS样式，改变元素的大小，位置时，或者将使用display:none时，会造成重排；修改CSS颜色或者visibility:hidden等等，会造成重绘。
• 修改网页的默认字体时。
• Resize窗口的时候（移动端没有这个问题），或是滚动的时候。
• 内容的改变，(用户在输入框中写入内容也会)。
• 激活伪类，如:hover。
• 计算offsetWidth和offsetHeight。

三、减少重排重绘

• 尽量避免style的使用，对于需要操作DOM元素节点，重新命名className，更改className名称。
• 如果增加元素或者clone元素，可以先把元素通过documentFragment (opens new window)放入内存中，等操作完毕后，再appendChild到DOM元素中。
• 不要经常获取同一个元素，可以第一次获取元素后，用变量保存下来，减少遍历时间。
• 尽量少使用dispaly:none，可以使用visibility:hidden代替，dispaly:none会造成重排，visibility:hidden会造成重绘。
• 不要使用Table布局，因为一个小小的操作，可能就会造成整个表格的重排或重绘。
• 使用resize事件时，做防抖和节流处理。
• 对动画元素使用absolute / fixed属性。
• 批量修改元素时，可以先让元素脱离文档流，等修改完毕后，再放入文档流。