如果我有以下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将显示在屏幕上。