浅谈js加载的时间线

html文档的执行顺序

页面是从上到下的按顺序进行加载
1、创建Document对象，开始解析web页面，解析HTML标签元素和他们的文本内容后添加到Element对象和Text节点到文档中，在此阶段中

document.readyState="loading"

生成document对象，document状态位变为loading
2、遇到link外部css，创建线程加载，并且继续解析文档。
3、遇到script外部js，在没有设置async，defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
4、遇到script外部js，如果设置了async，defer，浏览器创建线程加载，并继续解析文档，对于async属性的脚本，脚本加载完毕之后立即执行。（异步禁止使用document.write()）

document.write():特别特殊它是把里面的东西当成HTML文档输出到页面里去，但是有一点就是，有的时候，当你整个文档全部解析的差不多的时候再用document.write()的话会把你之前所有的文档流都清空，用它里面的文档流代替。

例如：使用document.wirte('a'),整个页面只显示a，在这里有消除整个文档流的功能，连script都消除了。

浏览器运行结果

5、当遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
6、当文档解析完成，document.radyState = 'interactive',先解析完，再加载完，然后状态位变为interactive。
7、文档解析完成后，所有设置有defer的脚本会按照顺序执行。
8、document对象触发DOMContentLoader事件，这也标志着程序执行从同步脚本执行阶段转换为事件驱动阶段
9、当所有async的脚本加载并且执行后，img等加载完成后document.readyState = 'complete',window对象触发load事件
10、之后，通过异步响应方式处理用户输入，网络事件等

通过network可查看文档加载的顺序

image.png