- 解析HTML和构建DOM树
DOM 树是一个树状结构,其中每个 HTML 元素都被表示为一个节点,包括文本、标签、属性等。
2. 解析css和构建CSSOM
CSSOM表示网页的样式和布局信息。CSSOM 树与 DOM 树一一对应,每个元素都有对应的样式信息。
3. 合并DOM树和CSSOM,构建渲染树
CSSOM表示网页的样式和布局信息。CSSOM 树与 DOM 树一一对应,每个元素都有对应的样式信息。
4. 布局计算
浏览器开始计算每个元素在页面中的精确位置和尺寸
5. 绘制页面
览器使用计算出的位置和尺寸信息来绘制页面
6. 处理js
如果页面包含 JavaScript,浏览器将执行 JavaScript 代码。JavaScript 可能会修改 DOM 树和样式,从而触发重新布局和绘制