如果我有以下HTML div元素:
<div id="outer-div" style="Certain-Style">
<div id="inner-div">
</div>
....
</div>
那么浏览器将如何实现/呈现这些HTML元素呢?它是从外部div开始,然后是内部div,然后再返回应用outer-div
的CSS,然后再应用inner-div
的CSS?
让我们假设Certain-Style
样式将内部div顺时针旋转90度。inner-div
是一个angularjs指令,它根据inner-div
的宽度显示其他项目。旋转是先开始,然后构建指令,还是先构建指令,然后旋转?
2条答案
按热度按时间cngwdvgl1#
以下是浏览器步骤的快速回顾:
1.处理HTML标记并构建DOM树。
1.处理CSS标记并构建CSSOM树。
1.将DOM和CSSOM组合到渲染树中。
1.在渲染树上运行布局以计算每个节点的几何体。
1.将各个节点绘制到屏幕上。
我的来源是developers.google。下面是更多细节的链接。
Render-tree Construction, Layout, and Paint
tjvv9vkg2#
我认为这个视频是关于浏览器中渲染引擎如何工作的最好解释。
https://www.youtube.com/watch?v=CE12cBoalIc
好吧,我会从这个视频中为你总结。
Loader
首先,webkit(在chrome/safari中使用的渲染引擎)将执行称为Loader的操作。简单地说,这个操作将直接从服务器或缓存存储中获取您的HTML文件。
webkit获取HTML文件后,他会对你所有的HTML语法进行标记化,标记化后他会为你制作DOM树。
从令牌化webkit也做动作称为预加载扫描器,这个动作简单地说将看起来是另一个动作,必须做以后和webkit将安排他们。(例如:@import、使用cdn的脚本标记、使用外部/内部映像等)
所以在这个阶段,我们得到HTML,标记化,解析,然后我们得到一个DOM树。
布局
在我们从HTML文件中得到DOM树之后,webkit做的下一个动作是布局,这个动作基本上是从你的HTML创建一个布局,不要记住它只是布局而不是绘画。
实际上这是一个很长的主题,因为我不完全理解视频中所说的内容,所以我只是总结这一步将从前面的DOM树创建一个布局。
绘画
简单地说,这个动作将从之前创建的RenderObject绘制到您的布局,并且您的UI将显示在屏幕上。