浏览器的渲染流程

62 阅读1分钟

按照渲染顺序流水线可以分为以下几个阶段

构建DOM树,样式计算,布局阶段,分层,绘制,分块,光栅化和合成。

构建DOM树

为什么要构建DOM树呢,这是因为浏览器无法直接理解和使用HTML,所以要将HTML转化为DOM树,

样式计算

样式计算是为了计算出每个DOM节点的样式具体可以分为一下3步;把css转换为浏览器能够理解的结构,转换样式表中的属性值,使其变得标准化,计算DOM中每个节点的具体样式

布局阶段

现在我们有了DOM树和DOM中元素的 样式,但是这样还无法展示页面,因为我们不知道元素的DOM元素的几何位置。接下来我们就要计算出DOM树中几何元素的具体位置,这个阶段就是布局阶段。

在这个阶段要创建布局树和布局计算

如果下载 CSS 文件阻塞了,会阻塞 DOM 树的合成吗?会阻塞页面的显示吗?

js和css都有可能会阻塞DOM的解析

此文章为10月Day010学习笔记,内容来源于极客时间《浏览器的原理与实践》,强烈推荐该课程