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

Question

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

到现在为止，我已经理解了下一个订单：

1. DOM
2. JS（我猜是没关系JS是内联还是外部，如果它是外部的，我认为在加载，渲染和执行JS之前，DOM加载会被中断）
3. 内部CSS？ （或者它是一起渲染DOM负载。）
4. 外部CSS
5. 外部图片

根据文章'虽然外部样式表不会被加载，但内联和外部脚本都会被加载。'但是根据MDM '样式表加载块脚本执行' 即可。因此首先加载脚本，但只有在所有css可用后才执行它们？

我可以认为订单取决于浏览器的实现，还是有任何标准可以做到这一点？

是否有专家会告诉我们正确的订单？

提前致谢！

Answer 1

我相信订单是这样的：

1. 下载HTML文档
2. 开始 HTML 解析
3. 开始下载HTML中遇到的外部文件（JavaScript，CSS，图片）
4. 解析外部文件（如果它们是内联的，不需要下载）
   • 如果文件是脚本，则按照它们在HTML中显示的顺序运行它们
     • 如果他们现在尝试访问DOM，则会抛出错误
     • 在他们跑步时，他们会阻止任何其他渲染，这就是为什么有些脚本放在身体的底部
   • 对于 CSS 文件，请按样式规则的格式保存样式规则
   • 如果他们是图片，则显示
   • 如果加载失败，则在没有此文件的情况下继续
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）