页面渲染机制（重排Reflow和重绘Repaint）

什么是DOCTYPE及作用？

DTD（Document Type Definition）：文档类型定义。
是一系列的语法规则，用来定义XML或者(X)HTML文件类型。浏览器会使用DTD来判断文本类型，决定使用何种协议来解析，以及切换浏览器模式。

DOCTYPE：用来声明DTD规范。
一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出现一些差错。

常见的DOCTYPE声明有几种：

1. HTML 4.01 Strict：（严格模式）
   该DTD包含所有的HTML元素和属性，但不包括展示性的和弃用的元素（比如 font、u下划线等，这些是被废弃了的）。

2. HTML 4.01 Transitional：（传统模式）
   该DTD包含所有的HTML元素和属性，但包括展示性的和弃用的元素（比如 font、u下划线等）。

3. HTML 5

浏览器渲染过程

• DOM Tree：浏览器将HTML解析成树形的数据结构（DOM 树）。
• CSS Rule Tree：浏览器将CSS解析成树形的数据结构。
• Render Tree: DOM和CSSOM合并后生成Render Tree。（无法知道节点的位置）
• Layout: 有了RenderTree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置(宽高、颜色等)。
• Painting：按照算出来的规则，通过显卡，把内容绘制到屏幕上。
• Display：打印看到的最终效果。

浏览器渲染原理及流程【参考链接】https://www.cnblogs.com/slly/p/6640761.html

重排Reflow

定义：DOM结果中的各个元素都有自己的模型，这些都需要浏览器根据各种样式来计算，并根据计算结果将元素放在它该出现位置的过程。

什么时候触发Reflow

• 增加、删除、修改DOM节点时，会导致 Reflow 或 Repaint。
• 移动DOM的位置，或是加个动画的时候。
• 修改CSS样式时。（宽高、display 为none等，都是通过css样式来修改的）
• 当用户Resize窗口时（移动端没有这个问题），或是滚动的时候，有可能会触发（具体要看浏览器的规则）。
• 修改网页的默认字体时（这个影响非常严重）。

重绘Repaint

定义：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍的过程。

什么时候触发 Repaint

• DOM改动
• CSS改动

其实，就是判断当前呈现的内容是否发生变化（无论这个变化是通过DOM改动还是CSS改动）。只要页面显示的内容不一样了，肯定要 Repaint。

如何避免Reflow以及减少Repaint？

• 如果需要创建多个DOM节点，可以使用DocumentFragment创建完，然后一次性地加入document。
• 将元素的display设置为”none”，完成修改后再把display修改为原来的值。

如何减少浏览器repaint和reflow【参考链接】https://www.cnblogs.com/fullhouse/archive/2012/02/20/2360301.html