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

Question

我发现这个漂亮的邮递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. 重新绘制文档,包括任何新图像和样式

请注意,动态添加到页面(通过其他脚本)的脚本的执行顺序很复杂,基本上是不确定的.(请参阅此处的答案加载并执行脚本的顺序)