浏览器怎么渲染前端界面

1. 解析html文档，遇到HTML标签时，构建DOM树
2. 在构建DOM的过程中，如果遇到外联的样式声明或脚本声明，则暂停文档解析，创建新的网络连接，开始下载样式文件和脚本文件
3. 样式文件下载完成后，构建CSS Rule DOM，脚本文件下载完成后，解释并立即执行。
4. 构建DOM的同时，结合CSS规则树完成页面渲染。
5. 如果DOM树先于CSS规则树构建完成，则在CSS规则树构建完成后，页面会发生一次重绘，将新构建的CSS规则应用于渲染树。
   参考博客

浏览器解析渲染过程

（1）浏览器解析HTML源码，然后创建一个DOM树。

在DOM树中，每一个HTML标签都有一个对应的节点（元素节点），并且每一个文本也都有一个对应的文本节点，DOM树的根节点就是documentElement，对应的是html标签

（2）浏览器解析CSS代码，然后创建一个CSSOM树。

解析CSS的时候会按照如下顺序来定义优先级（递增）：浏览器默认设置<用户设置<外联样式<内联样式<标签样式

（3）根据DOM树和CSSOM来构建一个渲染树（render tree）。

（4）当渲染树创建完成之后，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

渲染树（render tree）和DOM树的关系

（1）在DOM树构建的同时，浏览器会构建渲染树。（为了提高用户体验，浏览器并不会等到所有HTML文档加载完成之后才建立渲染树并渲染，而是会在从网络层获取html文档的同时把已经接收到的局部内容先渲染出来）

（2）DOM树完全和html标签一一对应，而渲染树会忽略（即不包含）不需要渲染的元素（如head，样式为display:none的元素等）

（3）渲染树中每一个节点都存储着对应的CSS属性