【js学习笔记-076】-----客户端时间线

1.      web浏览器创建Document对象，并且开始解析web页面，解析html元素和它们的文本内容后添加Element对象和Text节点到文档中。document.readystate属性值是"loading"

2.      当没有遇到async和defer属性<script>元素时，它把这些元素添加到文档中，然后执行行内或外部脚本。同步执行时，下载和执行脚本时解析器会暂停。这样脚本就可以用document.write()把文本插入到输入流中。解析器恢复时这些文本会成为文档的一部分。

3.      当遇到async属性的<script>元素时，它开始下载脚本文本，并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器没有停下来等它下载。异步脚本禁止使用 document.write()方法。

4.      当文档完成解析，document.readyState属性变成"interactive"

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

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

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

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

 

以上的时间线是一条理解的时间线！但是所有浏览都没有支持它的全部细节。所有浏览器普遍支持load事件，都会触发它。它是决定文档完整载入并可以操作最通用的技术。

DOMContentLoad事件在load事件之前触发。

目前除IE(sb IE)外，document.readyState属性已被大部分浏览器支持，但浏览器间可能用细微的差别。defer属性被IE支持 async还是很通用。