Javascript HTML页面中元素的加载、呈现和执行顺序是什么？

我觉得这很好，但我想深入了解加载、呈现和执行元素的顺序，如DOM、脚本、CSS、图像、iFrame等

到目前为止，我已经理解了下一个顺序：

多姆

JS（我猜JS是内联的还是外部的并不重要，如果是外部的，我猜DOM加载会被中断，直到JS被加载、呈现和执行）

内部CSS？（或者它与DOM加载一起渲染。）

外部CSS

外部图像

根据文章“虽然外部样式表不会被加载，但是内联和外部脚本都会被加载。”但是根据文章“样式表加载会阻止脚本执行”。所以脚本是先加载的，但只有在所有css都可用后才执行

我可能认为顺序取决于浏览器的实现，或者是否有任何标准可以做到这一点

有专家会告诉我们正确的顺序吗？

---

提前谢谢

我相信顺序是这样的：

下载HTML文档

开始HTML解析

开始下载HTML中遇到的外部文件（JavaScript、CSS、图像）

下载外部文件后（或者如果这些文件是内联的，不需要下载）解析外部文件

• 如果文件是脚本，则按照它们在HTML中出现的顺序运行它们
  • 如果他们现在试图访问DOM，就会抛出一个错误
  • 当它们运行时，它们将阻止任何其他渲染，这就是为什么一些脚本被放在正文的底部
• 对于CSS文件，按样式规则在HTML中的显示顺序保存样式规则
• 如果它们是图像，则显示它们
• 如果加载失败，则不使用此文件继续

结束HTML解析

创建DOM——包括我们目前拥有的所有样式

当DOM完全构建并加载并运行脚本时，执行DOMContentLoaded事件

• 即使所有其他外部文件（图像、css）未完成下载（从步骤4开始），也会发生此情况
• 在Chrome F12开发者工具中，这由网络视图上的一条蓝线表示
• 将开始运行您添加到此事件的任何内容，例如

  window.addEventListener（“DOMContentLoaded”，doStuff，true）

开始将文档绘制到显示窗口（使用已加载的任何样式）

加载所有外部文件后，执行window.onload事件

• 在Chrome F12开发者工具中，这由网络视图上的红线表示
• 这将开始运行jQueryready函数

  $（document）.ready（函数（）{…}）

• 将开始运行您添加到此事件中的任何代码，例如

  window.addEventListener（“load”，doStuff，true）

重新绘制文档，包括任何新图像和样式

---

请注意，动态添加到页面（由其他脚本）的脚本的执行顺序是复杂的，基本上是不确定的。（请参见此处的答案）

您可以使用Chrome DevTools查看页面上元素的加载顺序（网络选项卡）和呈现顺序（时间线选项卡）。样式表仅阻止样式表链接后面的

块执行

。否则，

块将同步加载和解析（除非存在“延迟”或“异步”属性，而且这些属性非常新）。这当然取决于浏览器本身，每个

品牌

都会以这样一种方式实施他们的浏览器，即他们相信会优化或使您的浏览体验比其他品牌更好。也就是说，我认为它们基本上是相同的，几乎没有变化。请看Yes@shenku，我还认为每个实现都有一个最小变化的标准，否则我们开发人员会在我们已经有的浏览器上试验更多的bug。必须是订单。请查看这篇文章，明确解释订单。我有个问题。在步骤9中，加载css和img文件后是否永远不会触发window.onload？如果下载返回错误，是否会触发window.onload？