从整体上看浏览器的渲染流程
浏览器的渲染流程主要包括以下几个流程：
- 解析HTML，生成DOM树，解析CSS，生成CSSOM树。
- 将DOM树和CSSOM树进行结合，生成渲染树(Render Tree)。
- 根据生成的渲染树，进行回流（Layout），得到节点的几何信息（位置，大小）。
- 根据渲染树以及回流得到的几何信息，得到节点的绝对像素。
- 将像素发送给GPU，展示在页面上。
一、生成DOM树
- 首先，浏览器会从内存或者网络中读取出HTML文件的二进制数据，然后将其转换为字符串，然后转换为Token。
- Token会标识出当前字符串是开始标签还是结束标签还是文本。
- 每生成一个Token之后会立刻创建出节点对象，最后生成一颗DOM树。
二、生成CSSOM树
浏览器拿到CSS后，首先会识别出Token，然后构建节点并生成CSSOM树,这个过程和构建DOM树很类似。
三、生成渲染树
生成DOM树和CSSOM树之后，需要将这两棵树进行组合称为渲染树。需要注意的是，渲染树并不是简单的将二者进行结合，渲染树只会包括需要显示的节点和节点的样式信息，如果某个节点是display:none，那么就不会出现在渲染树中。
- 渲染过程遇到JS文件怎么办？
因为浏览器有GUI线程和JS引擎线程，这两个线程是互斥的，JS的加载、解析和执行会阻塞DOM的构建，因此要想首屏渲染的快，就尽量减少在首屏加载JS文件，尽量将script标签放在body标签的底部。
- 如果浏览器尚未完成CSSOM树的构建，此时想要运行JS脚本怎么办？
这种情况下，浏览器会先下载和构建CSSOM，然后再执行JS脚本，最后构建DOM。
四、回流布局
根据生成的渲染树，计算元素在设备视口内的确切位置和大小，这个计算的阶段就是回流，为了弄清每个对象在网站上的确切位置和大小，需要从根节点进行遍历。
五、重绘
经过回流布局之后，我们已经知道了节点的样式和具体的位置大小，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这就是重绘。
常见问题汇总
RQ1：CSSOM树和DOM树是同时解析的吗？
浏览器会下下载HTML解析页面生成DOM树，遇到CSS标签就开始解析CSS，这个过程不会阻塞，但是如果遇到了JS脚本，此时假如CSSOM还没有构建完，需要等待CSSOM构建完，再去执行JS脚本，然后再执行DOM解析，此时会阻塞。
RQ2：浏览器渲染时的分层是什么意思？
通常页面的组成是很复杂的，尤其是一些页面中包含一些复杂的动画效果，如果没有分层机制，从布局树直接生成目标图标的话，每次页面发生细微的变化的时候都要进行回流和重绘，会严重影响性能，分层就是类似于PS中的一张图片可以分为很多图层，将素材分解为多个图层的操作就是分层。
RQ3：发生重绘和回流的时机是什么？
发生回流的情况：
- 页面刚开始渲染的时候
- 浏览器的窗口尺寸发生变化的时候
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化
- 内容发生变化
- 字体大小变化
发生重绘但是不会流的情况
- 当页面中发生的是元素样式的改变，但是位置并未发生变化的情况。（例如color，background等）
注意：回流一定重绘，重绘不一定回流。
RQ4：回流和重绘谁更影响性能？
回流，因为有时候一个元素发生回流，会导致其周围元素也发生回流。
RQ5：如何减少回流和重绘？
- 使用visibility替换display: none，前者只会引起重绘，后者可能会引发回流。
- 离线操作DOM，例如可以通过document.fragment，操作完成之后再将元素带回到文档中。