客户端js时间线

     

 js一直是单线程执行的，浏览器为几个明显的耗时任务单独开辟线程解决耗时问题 （异步） 

1、创建document对象，开始解析web页面。创建HTMLHtmlElement对象，添加到document中。这个阶段document.readyState = 'loading'。

2、遇到link外部css，创建线程加载，同时继续解析文档。（并发/异步）
3、遇到script外部js，并且没有设置async、defer，浏览器创建线程加载，并阻塞，等待js加载完成并执行完成该脚本后，继续解析文档。（异步最好别用document.write()，容易出问题）
4、遇到script外部js，并且设置有async、defter，浏览器创建线程加载，并继续解析文档。
5、遇到img等，浏览器创建线程加载，并继续解析文档。
6、当文档解析完成，document.readyState = 'interactive'。
7、接着，所有设置有defer的脚本会按照顺序执行。
8、当上一步执行完成以后， document对象触发DOMContentLoaded事件。（这句话是原则上的执行顺序，但是，按照《JavaScript高级程序设计》中又补充说：事实上，defer脚本不一定会按照顺序执行，也不一定会在DOMContentLoaded之前执行）
9、当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件。

10、从此，以异步响应方式处理用户输入、网络事件等。

三个状态：loading 

                interactive     domTree加载完成时

                complete        所有的都加载完成时