js加载时间线详细说明与注意事项

1. 创建Document对象，开始解析web界面，解析html元素和他们文本内容后添加Element 对象和Text节点，这阶段 document.readyState = “loading”
2. 遇到link 外部CSS，创建线程加载，并继续解析文档
3. 遇到script外部js，并且没有async/defer，浏览器加载并且阻塞，等待js加载完成并执行脚本，然后继续解析文档
4. 遇到script外部js，且设置有async/defer，浏览器创建线程加载，并继续解析文档，对于async属性的脚本，脚本加载完成后立即执行（异步禁止使用document.write）
5. 遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档
6. 当文档解析完成后，document.readyState = “interactive”
7. 文档解析完成后，所有设置有defer的脚本会按照顺序执行
8. document对象出发DOMContentLoaded事件，这也标志着程序从同步脚本执行阶段，转化为时间驱动阶段
9. 当所有async的脚本加载完成并且执行后，img等加载完成后，document,readyState = “complete”,window对象出发loaded事件
   10.从此，以异步响应方式处理用户输入/网络事件等