HTML、CSS、JavaScript是如何变成页面的？

，以及有了DOM树和DOM树中元素的样式，但还不足以显示页面，因为还不知道DOM元素的几何位置信息，布局阶段就是需要计算出DOM树中元素的几何位置，包括以下几个步骤：

创建布局树

DOM树中包含很多不可见的标签，比如某个标签使用了属性"display:none"。所以在显示之前，还要额外地构建一棵只包含可见元素的布局树，浏览器创建布局树的大致流程为：遍历DOM树中所有可见节点，并加入布局树中，忽略不可见节点。

布局计算

计算每个元素的几何坐标位置，并将这些信息保存在布局树中。

小结前三个阶段：在HTML页面内容被提交给浏览器渲染引擎后，渲染引擎首先将HTML解析为浏览器可以理解的DOM；然后根据CSS样式表，计算出DOM数所有节点的样式；接着又计算每个元素的几何坐标位置，并将这些信息保存在布局树中。

分层

有了每个元素的样式和位置信息，但还是不能开始着手绘制页面，因为页面中还有很多复杂的效果，如3D变化、页面滚动等，为了实现这些效果，渲染引擎还需要为特定节点生成专门的图层，并生成一颗对应的图层树，即有些元素实际上是被分成了很多层，这些图层叠加后合成了最终的页面。只要满足下面两个条件之一的元素就会可以生成一个对应的图层：

拥有层叠上下文属性的元素会被提升为单独的一层

（编辑：通化站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!