犀牛书读书笔记-客户端javascript时间线

web页面中js程序执行的时间线

在请求的html页面返回到客户端后，web页面和其引入的脚本会按照下面的时间线进行解析和执行。本文重点解释js程序的执行，不对页面的渲染过程进行分析。
该时间包含如下7个阶段：
 1. web浏览器创建Document对象，并且开始解析web页面，这个阶段document.readystate的值为loading。
 2. 当html解析器遇到没有defer 和 async属性的script标签时，把script元素加入到文档，然后执行脚本。脚本同步执行，在下载和执行脚本的时候会阻塞html的解析。脚本可以通过document.write()把文本插入到输入流中，当html解析器继续执行时，文本会添加到文档中。脚本执行时可以访问自己的script元素和之前构建的dom树。
 3. 当html解析器遇到有async属性的script标签时，脚本开始下载，并在下载完成后尽快执行。该过程不阻塞解析器的执行，并且脚本内禁止使用document.write()。脚本可以访问自己的script标签和它之前的的dom树。
 4. 文档解析完成时，document.readystate的值变为interactive。
 5. 此时，含有defer属性的脚本按照它们在文档中的的出现顺序执行，此时也可能有异步脚本执行。脚本可以访问完成的dom树，并且禁止使用document.write()；
 6. Document对象上触发DOMContentloaded事件，标志着程序执行从脚本同步执行阶段到了异步事件驱动阶段。此时可能还有异步脚本没有执行完成。
 7. 文档解析全部完成，但是浏览器可能还在等待其他资源的载入，如图片等。当所有资源载入完成、异步脚本执行完成时，document.readystate的值变为completed，window对象上触发load事件。
 8. 从此以后，调用异步事件，响应用户输入、网络事件、计时器过期等。