22.打开一个网页的解析过程

打开一个网页的解析过程

1）构建 DOM 树，即创建 document 对象，解析 html 元素和字符数据，添加 element 节点和 text 节点到 document 中。此时，document.readyState = 'loading' 2）遇到 link 外部 CSS，创建线程加载，并继续解析文档 3）遇到 script 外部 JS： a.未设置 async、defer：浏览器加载 JS，并堵塞，等待 JS 加载并执行完成，然后继续解 析文档 b.设置 async：异步加载脚本，脚本加载完立即执行脚本 c.设置 defer：异步加载脚本，文档解析完成后执行脚本 4）遇到 img 等，先解析 DOM 结构，然后异步加载 src，并继续解析文档 5）文档解析完成，此时 document.readyState = 'interactive' 6）设置有 defer 的 JS 脚本执行 7）document 对象触发 DOMContentLoaded 事件，标志着程序执行由同步脚本执行阶 段转化为事件驱动阶段 8）文档和所有资源加载完成，document.readyState = 'complete'，window 触发 onload 事件 9）此后，以异步响应方式处理用户输入、网络事件等