DOM解析，加载，渲染，准备好之间有什么区别？ [英] What is the difference between DOM parsing, loading, rendering, ready?

问题描述

我试图了解DOM的呈现方式，资源以及从网络请求/加载的内容。但是，在阅读互联网上发现的资源时，会使用DOM解析/加载/呈现/就绪术语，而我似乎无法掌握这些事件的顺序。

I am trying to understand how the DOM is rendered, and resources and requested/loaded from the network. However when reading the resources found on internet, DOM parsing/loading/rendering/ready terms are used and I cant seem to grasp what is the order of these 'events'.

当从网络请求脚本，css或img文件时，它是仅停止渲染dom还是停止解析它？ Dom加载与Dom渲染相同吗？并且DomContentLoaded事件等同于 jQuery.ready（）？

When script, css or img file is requested from network, does it stop rendering dom only or stops parsing it also? Is Dom loading same as Dom rendering? and Is DomContentLoaded event equivalent to jQuery.ready()?

有人可以解释一下这些术语是否属于同义词和它们发生的顺序是什么？

Can someone please explain if some of these terms are synonymous and in what order they happen?

推荐答案

当您打开浏览器窗口时，该窗口需要有一个文档加载到其中供用户查看和交互。但是，用户可以远离文档（同时仍然保持相同的窗口打开）并加载另一个文档。当然，用户也可以关闭浏览器窗口。因此，您可以说窗口和文档具有生命周期。

When you open a browser window, that window needs to have a document loaded into it for the user to see and interact with. But, a user can navigate away from that document (while still keeping the same window open) and load up another document. Of course, the user can close the browser window as well. As such, you can say that the window and the document have a life-cycle.

您可以通过对象API访问窗口和文档，您可以通过挂钩在这些对象的生命周期中的键事件期间应该调用的函数来参与这些对象的生命周期。

The window and the document are accessible to you via object APIs and you can get involved in the life-cycles of these objects by hooking up functions that should be called during key events in the life-cycle of these objects.

窗口对象位于浏览器对象模型的顶部 - 它总是存在（你不能有文件如果没有窗口加载它，这意味着它是浏览器的 全球 对象。您可以随时在任何JavaScript代码中与它交谈。

The window object is at the top of the browser's object model - it is always present (you can't have a document if there's no window to load it into) and this means that it is the browser's Global Object. You can talk to it anytime in any JavaScript code.

当您请求文档（这将是HTTP或HTTPS请求）并且资源返回到客户端，它返回HTTP或HTTPS响应 - 这是数据有效负载（文本，html，css，JavaScript，JSON，XML等）的存在。

When you make a request for a document (that would be an HTTP or HTTPS request) and the resource is returned to the client, it comes back in an HTTP or HTTPS response - this is where the data payload (the text, html, css, JavaScript, JSON, XML, etc.) lives.

假设您已经请求.html页面。当浏览器开始接收该有效负载时，它开始读取HTML并构造由代码形成的文档对象的内存中表示。这种表示称为文档对象模型或DOM。

Let's say that you've requested an .html page. As the browser begins to receive that payload it begins to read the HTML and construct an "in-memory" representation of the document object formed from the code. This representation is called The Document Object Model or the DOM.

读取/处理HTML的行为称为解析，当浏览器完成此操作后，DOM结构现已完成。生命周期中的关键时刻触发文档对象的 DOMContentLoaded 事件，表示有完整形成的文档的足够信息是交互式的。此事件与jQuery的 document.ready <同义。 / a>事件。

The act of reading/processing the HTML is called "parsing" and when the browser is done doing this, the DOM structure is now complete. This key moment in the life-cycle triggers the document object's DOMContentLoaded event, which signifies that there is enough information for a fully formed document to be interactive. This event is synonymous with jQuery's document.ready event.

但是，在继续之前，我们需要备份一下......当浏览器解析HTML时，它还呈现 该内容到屏幕，意味着文档中的空间被分配给元素及其内容，并显示该内容。在所有解析完成后，渲染引擎在解析引擎工作的同时工作，仅落后一步 - 如果解析引擎解析表行，例如，渲染引擎将会渲染它。但是，当涉及图像之类的东西时，虽然图像元素可能已被解析，但实际图像文件可能尚未完成下载到客户端。这就是为什么你有时可能最初看到一个没有图像的页面然后随着图像开始出现，页面上的其他内容必须转移以为图像腾出空间 - 浏览器知道将会是一个图像，但它不一定知道图像到达之前需要多少空间。

But, before going on, we need to back up a moment... As the browser is parsing the HTML, it also "renders" that content to the screen, meaning that space in the document is allocated for the element and its content and that content is displayed. This doesn't happen AFTER all parsing is complete, the rendering engine works at the same time the parsing engine is working, just one step behind it - - if the parsing engine parses a table-row, for example, the rendering engine will then render it. However, when it comes to things like images, although the image element may have been parsed, the actual image file may not yet have finished downloading to the client. This is why you may sometimes initially see a page with no images and then as the images begin to appear, the rest of the content on the page has to shift to make room for the image -- the browser knew there was going to be an image, but it didn't necessarily know how much space it was going to need for that image until it arrived.

CSS文件，JS文件，图像和其他所需资源通过后台的文档下载，但大多数浏览器/操作系统限制了多少HTTP请求可以同时工作。我知道对于Windows，Windows注册表有一个IE设置，当时有10个请求限制，所以如果一个页面有11个图像，前10个将同时下载，但第11个将不得不等待。这是建议最好将多个CSS文件合并到一个文件中并使用图像精灵而不是单独的图像 - 以减少页面必须进行的HTTP请求总量的原因之一。

CSS files, JS files, images and other resources required by the document download in the background, but most browsers/operating systems cap how many HTTP requests can be working simultaneously. I know for Windows, the Windows registry has a setting for IE that caps that at 10 requests at at time, so if a page has 11 images in it, the first 10 will download at the same time, but the 11th will have to wait. This is one of the reasons it is suggested that it's better to combine multiple CSS files into one file and to use image sprites, rather than separate images - - to reduce the overall amount of HTTP requests a page has to make.

当文档所需的所有外部资源都已完成下载时（CSS文件，JavaScript文件，图像文件等） ，窗口将收到加载事件，表示不仅构建了DOM结构，而且所有资源都可供使用。当您的代码需要与外部资源的内容进行交互时，这是一个事件 - 它必须等待内容在消费之前到达。

When all of the external resources required by the document have completed downloading (CSS files, JavaScript files, image files, etc.), the window will receive its "load" event, which signifies that, not only has the DOM structure been built, but all resources are available for use. This is the event to tap into when your code needs to interact with the content of an external resource - - it must wait for the content to arrive before consuming it.

现在文件已在窗口中完全加载，任何事情都可能发生。用户可以点击内容，按键提供输入，滚动等。所有这些操作都会触发事件，并且可以在适当的时间点击其中的任何一个或全部来启动自定义代码。

Now that the document is fully loaded in the window, anything can happen. The user may click things, press keys to provide input, scroll, etc. All these actions cause events to trigger and any or all of them can be tapped into to launch custom code at just the right time.

当要求浏览器窗口加载不同的文档时，会发生以下事件：被触发，表示文档的生命结束，例如窗口的 beforeunload 事件，最终是 卸载 事件。

When the browser window is asked to load a different document, there are events that are triggered that signify the end of the document's life, such as the window's beforeunload event and ultimately its unload event.

这仍然是整个过程的简化，但我认为它应该能够很好地概述文档在其生命周期内的加载，解析和呈现方式。

This is all still a simplification of the total process, but I think it should give you a good overview of how documents are loaded, parsed and rendered within their life-cycle.

这篇关于DOM解析，加载，渲染，准备好之间有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！