前言：了解并理解浏览器的渲染原理流程，对我们的性能优化有着至关重要的作用。
至于渲染引擎，我们大可忽略，知道这个概念就行。
流程如下：
1、下载html文本文件，生成dom树。
2、下载css文件，解析CSS生成CSSOM规则树。
3、将DOM树与CSSOM规则树合并在一起生成渲染树。
4、遍历渲染树开始布局，计算每个节点的位置大小信息。
5、将渲染树每个节点 逐个 绘制到屏幕。
注意点：
dom树生成过程中需注意：
1、下载html文档同时可能会并行下载css文件，js文件。
2、DOM树的生成过程中可能会被CSS和JS的加载执行阻塞。
3、当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行，然后继续构建DOM。
4、如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM还没有下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的下载和构建。
所以建议大家：
1、CSS 优先、JS置后，且JavaScript 应尽量少影响 DOM 的构建。
CSSOM规则树生成过程中注意：
1、就近原则，优先使用class或id选择器，少用后代选择器，解析是需要代价的。
2、提高样式的复用性。
构建渲染树需注意：
通过DOM树和CSS规则树我们便可以构建渲染树。浏览器会先从DOM树的根节点开始遍历每个可见节点。对每个可见节点，找到其适配的CSS样式规则并应用。
后续js操作或者其他引起的重排和重绘：
重绘（replaint）：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。
重排（reflow）：意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow，或是Layout。