客户端JavaScript时间线
复习一下权威指南上的东西
JavaScript程序执行的时间线
- web浏览器创建document对象,并且开始解析web页面,解析html元素和它们的文本内容后添加element对象和text节点到文档中。在这个阶段document.readyState属性的值时’loading’
- 当html解析器遇到没有async和defer属性的script元素时,它把这些元素添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载(如果需要)和执行时解析器会暂停。这样脚本就可以用document.write()来把文本插入到输入流中。解析器恢复时这些文本会成为文档的一部分。同步脚本经常简单定义函数和注册后面使用的注册事件处理程序,但它们可以遍历和操作文档树,因为,在它们执行时已经存在了。这样,同步脚本可以看到它自己的script元素和它们之前的文档内容
- 当解析器遇到设置了async和defer属性的script元素时,它开始下载脚本文本,并继续解析文档。脚本会在它下载完成后尽快执行,但是解析器没有停下来等它下载。异步脚本禁止使用document.write()方法。它们可以看到自己的script元素和它之前的所有文档元素,并且可能或干脆不可能访问其他的文档内容
- 当文档完成解析,document.readyState属性变成’interactive’
- 所有defer属性的脚本,会按它们在文档的里的出现顺序执行。异步脚本可能也会在这个时间执行。延迟脚本能访问完整的文档树,禁止使用document.write()方法
- 浏览器在document对象上触发DOMContentLoaded事件。这标志着程序执行从同步脚本执行阶段转换到了异步事件驱动阶段。但要注意,这时可能还有异步脚本没有执行完成
- 这时,文档已经完全解析完成,但是浏览器可能还在等待其他内容载入,如图片。当所有这些内容完成加载时,并且所有异步脚本完成载入和执行,document.readyState属性改变为’complete’,web浏览器触发window对象上的load事件
- 从此刻起,会调用异步事件,以异步响应用户输入事件、网络事件、计时器过期等