简述页面渲染的过程

目录

第一步，解析html代码，生成DOM树。

第二步，解析css文件，生成CSSOM。

第三步：将DOM和CSSOM结合起来，生成Render渲染树。

当渲染树生成之后，浏览器就会根据渲染树在屏幕上渲染和展示。

---

浏览器是怎么把我们写的一行行代码渲染成美观的页面呢？

第一步，解析html代码，生成DOM树。

这一步就是将html代码按照从上到下，从左到右的顺序解析为一棵dom tree，将树上的节点压入文档流并且进行布局。

第二步，解析css文件，生成CSSOM。

CSSOM就是css  object model的简称，解析顺序为：浏览器默认样式->自定义样式->页面内的样式。

第三步：将DOM和CSSOM结合起来，生成Render渲染树。

这个渲染树和DOM树的不同之处在于，它是受样式影响的。它不包括那些不可见的节点。

构建render树的时候会将DOM树转换为更加结构化的渲染树，布局和绘制render树的时候会将渲染树转换为可见的像素画面。

当渲染树生成之后，浏览器就会根据渲染树在屏幕上渲染和展示。

这样，一个渲染过程就结束了。