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 所有的都加载完成时