客户端js时间线

由于JavaScript是单线程的，了解客户端js时间线对我们来说很重要，让我们可以更清晰地知道某些步骤的执行顺序。以下的文章参考了《JavaScript权威指南》。

总体来说JavaScript程序从脚本执行阶段开始，然后开始切换到事件处理阶段。以下是JavaScript程序执行的详细时间线。

1.Web浏览器创建document对象，并且开始解析Web页面，解析HTML元素和他们的文本内容后添加到Element对象和Text节点到文档中。在这个阶段document.readystate属性的值是"loading"。遇到link标签引入的外部css文件，就开启另一线程去加载，同时继续解析文档。

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

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

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

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

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

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

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