1.浏览器渲染

我们在浏览器地址中输入一个域名之后，会进行DNS解析成IP地址来访问服务器，获取到服务器返回的index.html，在拿到之后浏览器会进行以下操作

DOM树构建：渲染引擎使用HTML解析器（调用XML解析器）解析HTML文档，将各个HTML元素逐个转化成DOM节点，从而生成DOM树；
CSSOM树构建：CSS解析器解析CSS，并将其转化为CSS对象，将这些CSS对象组装起来，构建CSSOM树；
渲染树构建：DOM 树和 CSSOM 树都构建完成以后，浏览器会根据这两棵树构建出一棵渲染树；
页面布局：渲染树构建完毕之后，元素的位置关系以及需要应用的样式就确定了，这时浏览器会计算出所有元素的大小和绝对位置；
页面绘制：页面布局完成之后，浏览器会将根据处理出来的结果，把每一个页面图层转换为像素，并对所有的媒体文件进行解码。

根据上面的图来说的话就是浏览器拿到htnl后进行解析 在Dom树解析的过程中，遇到link会去进行请求资源，这个过程不会阻塞Dom的解析；

浏览器将获取的HTML文档由HTML解析器解析成DOM树

同时由CSS解析器将CSS样式解析成CSS Rule Tree（CSS规则树）

在 DOM 树和 CSSOM 树都渲染完成之后，就会进入渲染树的构建阶段。渲染树就是 DOM 树和 CSSOM 树的结合，会得到一个可以知道每个节点会应用什么样式的数据结构。这个结合的过程就是遍历整个 DOM 树，然后在 CSSOM 树里查询到匹配的样式。

在不同浏览器里，构建渲染树的过程不太一样

经过上面的步骤，就生成了一棵渲染树，这棵树就是展示页面的关键。到现在为止，已经有了需要渲染的所有节点之间的结构关系及其样式信息。下面就需要进行页面的布局。

！！通过计算渲染树上每个节点的样式，就能得出来每个元素所占空间的大小和位置。当有了所有元素的大小和位置后，就可以在浏览器的页面区域里去绘制元素的边框了。这个过程就是布局。这个过程中，浏览器对渲染树进行遍历，将元素间嵌套关系以盒模型的形式写入文档流：盒模型在布局过程中会计算出元素确切的大小和定位。计算完毕后，相应的信息被写回渲染树上，就形成了布局渲染树。同时，每一个元素盒子也都携带着自身的样式信息，作为后续绘制的依据。

！！经过布局，每个元素的位置和大小就有了，就会进行下一个流程绘制页面

最终形成我们所看到的页面

2.回流（重排）reflow

概念

在浏览器渲染页面时，第一次计算节点大小和位置，称之为布局

之后对节点大小、位置修改重新计算称之为回流

什么情况会引起回流

DOM结构发生改变，比如添加了一个节点或者删除了一个节点
改变了布局，修改了问width、height、padding、font-size（比如span标签是通过文字决定大小）等
比如resize（修改了窗口尺寸）
比如调用了getComputedStyle方法获取尺寸，位置信息
激活CSS伪类

重绘不一定导致重排，但回流一定会导致重绘，回流是一件非常消耗性能的事情

3.重绘 repaint

概念

浏览器第一次渲染内容称之为绘制（paint）

之后重新渲染，某些元素的外观被改变所触发的浏览器行为（重新计算节点在屏幕中的绝对位置并渲染的过程）称为重绘

什么情况会引起重绘

比如修改了背景色、文字颜色、边框颜色、样式等

4.优化建议

使用cssText，修改样式尽量一次性修改，比如通过动态添加class类名修改
尽量避免频繁操作DOM
避免通过getComputedStyle获取尺寸、大小等信息
脱离文档流：使用 absolute 或 fixed 脱离文档流（减小重排范围）注：并不是不会引起回流，而是开销相对较小，不会对其他元素造成产生影响

回流和重绘