我试图了解DOM的呈现方式，资源以及从网络请求/加载的内容。然而，当阅读在互联网上找到的资源时，使用了DOM解析/加载/呈现/就绪术语，我似乎无法掌握这些事件的顺序是什么＆＃39;。
当从网络请求脚本，css或img文件时，它是仅停止渲染dom还是停止解析它？ Dom加载与Dom渲染相同吗？并且DomContentLoaded事件是否等同于jQuery.ready()？
有人可以解释一下这些术语是否是同义词以及它们发生的顺序？
答案 0 :(得分：11)
当您打开浏览器window时，该窗口需要加载document以供用户查看和交互。但是，用户可以离开document（同时仍保持相同的window打开）并加载另一个document。当然，用户也可以关闭浏览器窗口。因此，您可以说window和document具有生命周期。
您可以通过对象API访问window和document，您可以通过挂钩在密钥{{1}期间应该调用的函数来参与这些对象的生命周期在这些对象的生命周期中。
events对象位于浏览器对象模型的顶部 - 它始终存在（如果没有window加载它，则不能有document）这意味着它是浏览器的 全局 对象。您可以随时在任何JavaScript代码中与它交谈。
当您发出文档请求（即HTTP或HTTPS请求）并将资源返回给客户端时，它会返回HTTP或HTTPS响应 - 这是数据有效负载（文本，生活中使用html，css，JavaScript，JSON，XML等。
假设您已经请求.html页面。当浏览器开始接收该有效负载时，它开始读取HTML并构造由代码形成的window对象的“内存中”表示。此表示称为文档对象模型或DOM。
读取/处理HTML的行为称为“解析”，当浏览器完成此操作时，DOM结构现已完成。生命周期中的关键时刻触发文档对象的DOMContentLoaded事件，这表示有足够的信息使完全形成的document成为交互式。此事件与jQuery的document.ready事件同义。
但是，在继续之前，我们需要备份一下......当浏览器正在解析HTML时，它还“呈现”将该内容添加到屏幕上，这意味着为元素及其内容分配文档，并显示该内容。在所有解析完成后，渲染引擎在解析引擎工作的同时工作，仅落后一步 - 如果解析引擎解析表行，例如，渲染引擎将会渲染它。但是，当涉及图像之类的东西时，虽然图像元素可能已被解析，但实际图像文件可能尚未完成下载到客户端。这就是为什么你有时可能最初看到一个没有图像的页面然后随着图像开始出现，页面上的其他内容必须转移以为图像腾出空间 - 浏览器知道将会是一个图像，但它不一定知道该图像需要多少空间才能到达。
后台文档下载所需的CSS文件，JS文件，图像和其他资源，但大多数浏览器/操作系统限制了多少HTTP请求可以同时工作。我知道对于Windows，Windows注册表有一个IE设置，当时有10个请求限制，所以如果一个页面有11个图像，前10个将同时下载，但第11个将不得不等待。这是建议最好将多个CSS文件合并到一个文件中并使用图像精灵而不是单独的图像 - 以减少页面必须进行的HTTP请求总量的原因之一。
当document所需的所有外部资源都已完成下载（CSS文件，JavaScript文件，图像文件等）时，document将收到"load" event，表示不仅构建了DOM结构，而且所有资源都可供使用。当您的代码需要与外部资源的内容进行交互时，这是一个事件 - 它必须等待内容在消费之前到达。
现在window已完全加载document，任何事情都可能发生。用户可以点击内容，按键提供输入，滚动等。所有这些操作都会触发事件，并且可以在适当的时间点击其中的任何一个或全部来启动自定义代码。
当要求浏览器window加载其他window时，会触发一些表示文档生命结束的事件，例如窗口的beforeunload事件，最终它的unload event。
这仍然是整个过程的简化，但我认为它应该能够很好地概述文档在其生命周期中的加载，解析和呈现方式。