解析HTML DOM树何时发生？ [英] When does parsing HTML DOM tree happen?
问题描述
我总是看到一个网页的渲染流程，如下图所示：
I always see a rendering flow for a web page like the following image shows:
所以绘画只有在DOM树被解析并创建了CSSOM之后才开始，对吧？另一个说法是，在< body> 的末尾放置< script> 是最佳做法，页面在脚本下载之前呈现一些东西。
So the painting only begins after DOM tree is parsed and CSSOM is created, right? Another saying is, putting <script> in the end of <body> is the best practice so that the page renders something before script is downloaded.
我的问题是，解析DOM树何时会发生，我们怎么说完成？根据我的理解，最终，< script> 也是DOM树的一部分，只有加载的脚本可以调用DOM树被创建。浏览器从上到下读取html文件，创建DOM树，当它看到一个< script> 时，它停止下载并执行，直到解析过去整个页面。或者，页面是否在解析DOM树的同时对页面进行绘制？
My question is, when does parsing DOM tree happens and how can we say it is done? In my understanding, <script> in the end is also part of DOM tree, and only if the script loaded can we call the DOM tree is created. The browser reads the html file from top to bottom, creating the DOM Tree and when it sees a <script>, it stops to download and execute it until the parse goes through the whole page. Or, does the page paints the page at the same time of parsing DOM tree?
推荐答案
TL; DR：解析开始
TL;DR: Parsing starts instantaneously after receiving the document.
有关更详细的解释，我们需要深入了解渲染引擎的工作原理。
For a more detailed explanation, we need to dive into the way rendering engines work.
渲染引擎解析HTML文档并创建两个树：内容树和渲染树。内容树包含所有DOM节点。渲染树包含渲染页面所需的DOM节点的所有样式信息（ CSSOM ）和 。
Rendering engines parse the HTML document and create two trees: the content tree and the render tree. A content tree contains all DOM nodes. The render tree contains all styling information (the CSSOM) and only the DOM nodes that are required to render te page.
一旦创建了渲染树，浏览器就会经历两个过程：应用 layout 和 painting 每个DOM节点。应用布局意味着计算DOM节点应该出现在屏幕上的确切坐标。绘画意味着实际渲染像素并应用风格属性。
As soon as the render tree has been created, the browsers goes through two processes: applying layout and painting each DOM node. Applying layout means calculating the exact coordinates where a DOM node should appear on the screen. Painting means actually rendering the pixels and applying stylistic properties.
这是一个渐进的过程：浏览器不会等到所有的HTML被解析。内容的一部分将被解析和显示，而该过程将继续与来自网络的其余内容。
This is a gradual process: browsers won't wait until all HTML is parsed. Parts of the content will be parsed and displayed, while the process continues with the rest of the contents that keeps coming from the network.
您可以看到此过程发生在您的浏览器。例如，打开Chrome开发者工具并加载您选择的网站。
You can see this process happening in your browser. For example, open the Chrome Developer Tools and load a site of your choice.
在网络标签中记录活动后，您会注意到，在下载文档时解析开始。它识别资源并开始下载它们。蓝色垂直线表示 DOMContentLoaded 事件，红色垂直线表示加载事件。
After recording activity in the Network tab, you'll notice that parsing starts while downloading the document. It recognises resources and starts downloading them. The blue vertical line indicates the DOMContentLoaded event and the red vertical line indicates the load event.
录制时间表可以让您更深入地了解引擎盖下的情况。我已经将上面的屏幕截图作为示例，以指示在解析文档时绘画。请注意，在继续解析文档的另一部分之前，会出现初始绘画。
Recording a timeline gives you much more insight in what happens under the hood. I have included the screenshot above as an example to indicate that painting happens while parsing the document. Note that the initial paint occurs just before it continues parsing another part of the document. This process continues until it reaches the end of the document.
渲染引擎是 >单线程。几乎所有的东西，除了网络操作，都发生在这个线程中。
The rendering engine is single threaded. Almost everything, except network operations, happens in this thread.
结合网络的同步性质。开发人员希望< script> 被立即执行解析并执行（即一旦解析器到达脚本标签）。这意味着：
Combine that with the the synchronous nature of the web. Developers expect <script>'s to be parsed and executed immediately (that is: as soon as the parser reaches a script tag). That means that:
- 必须从网络中提取资源（由于DNS查找和连接速度，这可能是一个缓慢的过程）
- 资源的内容传递给JavaScript解释器。
- 解释器解析并执行代码。
解析文档暂停，直到此过程完成。您不会通过在文档末尾包含< script> 来提高整个解析时间。它增强了用户体验，因为解析和绘画的过程不会被需要执行的< script> 中断
Parsing the document halts until this process finishes. You don't improve the total parsing time by including <script>'s at the end of the document. It does enhance the user experience, as the process of parsing and painting isn't interrupted by <script>'s that need to be executed.
可以通过使用 defer 和/或<$ c $标记资源来解决此问题C>异步。 async 在HTML解析过程中下载文件，并在完成下载后暂停HTML解析器执行。 defer 在HTML解析过程中下载文件，只有解析器完成后才执行。
It is possible to work around this issue by marking the resource with defer and / or async. async downloads the file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading. defer downloads the file during HTML parsing and will only execute it after the parser has completed.
某些浏览器旨在通过使用所谓的推测性解析来解决< script> 的阻止方面。在下载并执行脚本时，引擎将解析（并运行HTML树构造！）。 Firefox和Chrome使用这种技术。
Some browsers aim to work around the blocking aspect of <script>'s by using so called speculative parsing. The engine parses ahead (and runs the HTML tree construction!) while scripts are being downloaded and executed. Firefox and Chrome use this technique.
如果投机成功，您可以想像性能增益（例如，DOM未被文档中包含的脚本更改）。等待脚本执行是没有必要的，页面已经被成功绘制。
不利的是，当投机失败时，失去了更多的工作。
You can imagine the performance gain if a speculation succeeds (eg. the DOM wasn't altered by the scripts that are included in the document). Waiting for the scripts to execute wasn't necessary and the page has been painted successfully. The downside is that there's more work lost when the speculation fails.
幸运的是，我们非常聪明的人在这些技术上工作，所以即使使用 document.write 正确不会打破这个过程。另一个经验法则是不要使用 document.write 。例如，它可能会破坏推测树：
Luckily for us, very smart people work at these technologies, so even using document.write properly won't break this process. Another rule of thumb is not to use document.write. For example, it could break the speculative tree:
// Results in an unbalanced tree
<script>document.write("<div>");</script>
// Results in an unfinished token
<script>document.write("<div></div");</script>
进一步阅读
以下资源值得您阅读的时间：
Further reading
The following resources are worth your time reading:
- Web Fundamentals (Google Developers)
- How browsers work
- MDN on HTML5 Parser
- An introduction to Browser Rendering (video)
这篇关于解析HTML DOM树何时发生？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
