Web浏览器创建Document对象,并且开始解析Web页面,解析HTML元素和它们的文本内容后添加Element对象和Text节点到文档中.在这个阶段document.readystate属性的值是”loading”.

当HTML解析器遇到没有async和defer属性的<script>元素时,它把这些元素添加到文档中,然后执行行内或外部脚本.这些脚本会同步执行,并且在脚本下载(如果需要)和执行时解析器会暂停.这样脚本就可以用document.write()来把文本插入到输入流中.解析器恢复时这些文本会成为文档的一部分.同步脚本经常简单定义函数和注册后面使用的注册事件处理程序,但它们可以遍历和操作文档树,因为在它们执行时已经存在了.这样,同步脚本可以看到它自己的<script>元素和它们之前的文档内容.

当解析器遇到设置了async属性的<script>元素时,它开始下载脚本文本,并继续解析文档.脚本会在它下载完成后尽快执行,但是解析器没有停下来等它下载.异步脚本禁止使用document.write()方法.它们可以看到自己的<script>元素和它之前的所有文档元素,并且可能或干脆不可能访问其他的文档内容.

当文档完成解析,document.readyState属性变成“interactive”.

所有有defer属性的脚本,会按它们在文档的里的出现顺序执行.异步脚本可能也会在这个时间执行.延迟脚本能访问完整的文档树,禁止使用document.write()方法.

浏览器在Document对象上触发DOMContentLoaded事件.这标志着程序执行从同步脚本执行阶段转换到了异步事件驱动阶段.但要注意,这时可能还有异步脚本没有执行完成.

这时,文档已经完全解析完成,但是浏览器可能还在等待其他内容载入,如图片.当所有这些内容完成载入时,并且所有异步脚本完成载入和执行,document.readyState属性改变为“complete”,Web浏览器触发Window对象上的load事件.

从此刻起,会调用异步事件,以异步响应用户输入事件、网络事件、计时器过期等.

David Flanagan. JavaScript权威指南

JavaScript时间线

原文: