前端DOM渲染页面过程

创建DOM树

浏览器解析HTML源码，创建DOM树，在DOM树中，每一个HTML标签都有一个对应的节点（元素节点），每一个文本也都有一个对应的节点（文本节点）。

解析css

浏览器解析css代码，计算出最终的样式数据。

构建渲染树

在DOM树的基础上，通过前一步计算出的最终样式数据，忽略不需要渲染的元素（如：display: none），构建一个渲染树。渲染树中每一个节点都存储着对应的css属性。

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