HTML 页面中元素的加载、渲染和执行顺序是什么？

Question

我发现这很好 post at kirupa.com，但我想深入了解 DOM、脚本、CSS、图像、IFrame 等元素的加载、渲染和执行顺序。

到现在我已经理解了下一个顺序：

1. DOM
2. JS（我猜 JS 是内联的还是外部的，如果是外部的，我猜 DOM 加载会中断，直到 JS 被加载、渲染和执行）
3. 内部 CSS？ （或者是一起渲染的 DOM 加载。）
4. 外部 CSS
5. 外部图片

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

我可以认为顺序取决于浏览器的实现，或者有什么标准可以做到这一点？

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

提前致谢！

Answer 1

我相信订单是这样的：

1. 下载 HTML 文档
2. 开始HTML解析
3. 开始下载在 HTML 中遇到的外部文件（JavaScript、CSS、图像）
4. 下载外部文件后解析（或者如果它们是内联的并且不需要下载）
   • 如果文件是脚本，则按照它们在 HTML 中出现的顺序运行它们
     • 如果他们现在尝试访问 DOM，他们会抛出错误
     • 在它们运行时，它们会阻止任何其他渲染，这就是为什么一些脚本被放在正文底部的原因
   • 对于 CSS 文件，按照它们在 HTML 中出现的顺序保存样式规则
   • 如果它们是图片，则显示它们
   • 如果加载失败，则不使用此文件继续
5. 结束 HTML 解析
6. 创建 DOM - 包括我们目前拥有的所有样式
7. 在 DOM 完全构建并加载并运行脚本时执行 DOMContentLoaded 事件
   • 即使没有完成所有其他外部文件（图像、css）的下载（从第 4 步开始）也会发生
   • 在 Chrome F12 开发者工具中，这由网络视图上的蓝线表示
   • 将开始运行您添加到此事件的任何内容，例如window.addEventListener("DOMContentLoaded", doStuff, true);
8. 开始将文档绘制到显示窗口（任何已加载的样式）
9. 所有外部文件加载完毕后执行window.onload事件
   • 在 Chrome F12 开发者工具中，这由网络视图上的红线表示
   • 这将开始运行jQuery ready函数$(document).ready(function(){ ... });
   • 将开始运行您添加到此事件的任何代码，例如window.addEventListener("load", doStuff, true);
10. 重新绘制文档，包括任何新的图像和样式

请注意，动态添加到您的页面（由其他脚本）的脚本的执行顺序很复杂，而且基本上是不确定的。 （在这里查看答案load and execute order of scripts）