浏览器从输入URL到页面加载完成全过程

1. DNS 查询

   • 操作系统首先在本地缓存中查询（ windows 可以用 ipconfig /displaydns 查询 DNS 缓存）。
   • 没有的话会去系统配置的 DNS 服务器中查询（有迭代查询和递归查询方式，区别就是前者是由客户端去做请求，后者是由系统配置的 DNS 服务器做请求，得到结果后将数据返回给客户端）。

2. TCP 握手

   • 应用层下发数据给传输层，同时 TCP 协议会指明两端的端口号，然后下发给网络层。
   • 网络层中的 IP 协议会确定 IP 地址，并且指示了数据传输中如何跳转路由器。
   • 将数据包封装到数据链路层的数据帧结构中，进行物理层传输。

3. TLS 握手

   • TLS 握手阶段两端采用非对称加密方式通信，正式通信阶段使用对称加密方式通信。

4. 服务器响应

   • 数据在进入服务端前，可能会先经过负载均衡服务器，可将请求合理的分发到多台服务器上。
   • 请求的资源通常是 html ,还有其他格式：pdf， image 等。

5. 浏览器判断状态码

   • 200 --> 继续解析。
   • 300 --> 重定向（有重定向计数器，超过次数报错）。
   • 400\500 --> 报错。

6. 浏览器解析文件

   • 如果是gzip格式会先解压，然后通过文件的编码格式解码文件。

7. 开始渲染

   • 解析 html 与 css 分别生成 DOM 和 CSSOM 树。
   • 遇到 script 标签会判断是否存在 async 或 defer,前者会并行进行下载并执行 JS，后者会先下载文件，等待 HTML 解析完成后顺序执行。
   • 如果 async 和 defer 都没，会阻塞渲染流程直到JS执行完毕。
   • html 资源完全加载和解析后触发 DOMContentLoaded 事件。

8. 生成 Render Tree 并布局

   • DOM 和 CSSOM 结合生成渲染树。
   • 计算每个对象的位置大小，根据渲染树布局。
   • 在生成 Render Tree 的过程中，浏览器同时调用 GPU 绘制，合成图层，展示到页面。

点赞、收藏的人已经开上兰博基尼了 (´▽`ʃ♡ƪ)

转载请注明出处！！！（https://www.jianshu.com/p/a50b19d720d3）