渲染过程
1.解析html文件，先是head，后是body
2.如果头部有外部的css链接，就去下载该css，如果有js链接也去下载
3.解析body部分，并生成DOM树，同时浏览器主进程去下载CSS
4.CSS文件下载完成，解析CSS文件成树形的数据结构（CSSOM树），然后结合DOM树合并成RenderObject树
5.布局（layout）：布局RenderObject树，负责RenderObject树中的元素的尺寸，位置等计算
6.绘制（painting）：绘制RenderObject树，绘制页面的像素信息，绘制到页面上。用户可以看到了
其中，前四步执行的比较快，5.6步执行的比较耗时。这是因为可能会发生回流（也叫重排，reflow。重新执行步骤5）及重绘（repaint，重新执行步骤6）。
重排和重绘到底是啥意思呢？接下来，对以上六个步骤进行详解的同时再解释重排和重绘：
第1.2.3步可以统称为构建DOM树：
当浏览器接收到服务器响应来的HTML文档后，会遍历文档节点，生成DOM树。需要注意的是，DOM树的生成过程中可能会被CSS和JS的加载执行而阻塞。
在这一步完成的时候，可能会发生渲染阻塞
渲染阻塞：当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行，然后继续构建DOM。每次去执行JavaScript脚本都会严重地阻塞DOM树的构建，如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM还没有下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的下载和构建。因此，script标签在使用时应当遵循以下两个规则：
1.CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源。
2.JS置后：我们通常把JS代码放到页面底部，且JavaScript 应尽量少影响 DOM 的构建。
第4步可以分为两小步：（1）CSS文件下载完成，解析CSS文件成树形的数据结构（CSSOM树）；
（2）并将DOM树和CSSOM树结合成渲染树。
（1）构建CSSOM树：浏览器解析CSS文件并生成CSS规则树，每个CSS文件都被分析成一个StyleSheet对象，每个对象都包含CSS规则。CSS规则对象包含对应于CSS语法的选择器和声明对象以及其他对象。
（2）构建渲染树（RenderObject树）：通过DOM树和CSS规则树我们便可以构建渲染树。浏览器会先从DOM树的根节点开始遍历每个可见节点。对每个可见节点，找到其适配的CSS样式规则并应用。
渲染树构建完成后，每个节点都是可见节点并且都含有其内容和对应规则的样式。这也是渲染树与DOM树的最大区别所在。渲染树是用于显示，那些不可见的元素当然就不会在这棵树中出现了，譬如。除此之外，display:none的也不会被显示在这棵树里头，但是visibility:hidden的元素是会显示在这棵树里头的。（display:none会导致重排和重绘，visibility:hiddden会导致重绘。这是后者的优点，但缺点是此节点一直保存在内存中，占用资源。）
第5步：布局（layout）
布局阶段会从渲染树的根节点开始遍历，然后确定每个节点对象在页面上的确切大小与位置，布局阶段的输出是一个盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。
第6步：绘制（paint）
在绘制阶段，遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。
replaint：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。
reflow：意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow，或是Layout。
有些情况下，比如修改了元素的样式，浏览器并不会立刻 reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。
有些情况下，比如 resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。
根据原理进行渲染优化：
1、尽可能早的提前引入css文件，例如在头部引入css文件。
2、尽可能早的加载css文件中的引入的资源，例如自定义字体文件，可以使用预加载，在link标签中加入rel=“preload” as = “font”该元素属性，不会造成渲染阻塞。
3、在DOM和CSS渲染之后加载js文件，例如在尾部加载js文件，或者使用该元素属性defer和async，进行js问价异步加载，但是不同的浏览器会有兼容性问题。
来源：CSDN
作者：快乐的小火车
链接：https://blog.csdn.net/lll_y1025/article/details/104579335