页面加载过程
DNS解析
- 浏览器DNS缓存
- 本地host文件缓存
- DNS服务器
- 根服务器
与服务端通信
- TCP链接（三次握手四次断开）
数据处理
- 响应状态码
- Content-Type 类型
渲染
- 解析HTML生成DOM树
- 解析CSS生成CSSDOM
- 加载或执行(async和defer)JavaScript脚本
- 生成渲染树
- 渲染（重绘一次）
async和defer的作用是什么？有什么区别?
- 没有任何标记 加载脚本并且立即执行，会阻塞HTML解析。
- defer标记 这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded (en-US) 事件前执行。
- async标记
- 对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。
- 对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。
- 该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。
Contentload和load
- 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。
- 当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。
