浏览器渲染机制触发重排和重绘

什么是Doctype及作用？

• DTD（document type definition，文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式；
• DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错；
• HTML4.01 有个严格模式和传统模式。

浏览器渲染过程？

1. 构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree），也叫内容树（content tree）；
2. 构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树；
3. 执行JavaScript：加载并执行JavaScript代码（包括内联代码或外联JavaScript文件）；
4. 构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree)；
   渲染树：按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。
5. 布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置；
6. 绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成；

重排Reflow： DOM 结构中的各个元素都有自己的盒子模型，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。

• 触发Reflow？

当你增加、删除、修改DOM节点时，会导致reflow或Repaint
当你移动DOM的位置，或是搞个动画的时候
当你修改css样式的时候
当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候
放你修改网页的默认字体时

重绘Repaint： 当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自特性绘制一遍，于是页面的内容出现了，这个过程称之为Repaint。

• 触发Repaint？

DOM和css改动

• 如何避免Reflow或Repaint？

1. 先将元素从document中删除，完成修改后再把元素放回原来的位置；
2. 将元素的display设置为”none”，完成修改后再把display修改为原来的值 ；
3. 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document；
4. 尽可能少的修改元素style上的属性；
5. 尽量通过修改className来修改样式；
6. 通过cssText属性来设置样式值；

如果此文对你有用请动动你的小手点个赞！谢谢！！！