输入URL至页面显示的过程

网络过程

1. 输⼊ URL，浏览器解析 URL

   • 是合法的 URL，且自动补全前缀或后缀
   • 不是合法的 URL，则调用搜索引擎搜索

2. DNS 解析域名，获取 ip 地址

   • 浏览器 -> 系统（host 文件）-> 路由器 -> ISP -> DNS 递归查询

3. 浏览器查看是否命中强缓存

   • 查看 Expires（HTTP 1.0，绝对时间）和 Cache-Control （HTTP 1.1，最大新鲜时间），若命中强缓存则直接返回缓存

4. 建立 TCP 链接，进行三次握手

   • 客户端 SYN=1，Seq=X 的包到服务器端
   • 服务器发回 SYN=1，ACK=X+1， Seq=Y 的响应包
   • 客户端发送 ACK=Y+1， Seq=Z

5. 若协议为 HTTPS，则会进行加密

6. 服务器检查协商缓存

   • 通过 ETag 和 Last-Modify 判断资源是否过期，若未过期，返回 304

7. 服务器处理请求，并返回响应报文

8. 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重⽤，关闭TCP连接的**四次握⼿**如下：

   • 客户端发送一个 FIN=1，Seq=U 的包到服务器
   • 服务器发回 FIN=1，ACK=U+1， Seq=V 的响应包 ，此时处于半关闭状态，但可能服务器端还有一个数据要发送
   • 数据完全发送完毕后，服务器发送 FIN=1，ACK=U+1， Seq=W 的响应包
   • 客户端发送 ACK=W+1， Seq=U+1 的包

渲染页面的过程

1. 构建DOM树：

   1. 把字节流解码成字符流
   2. 通过词法分析器解释成词语，构建成节点
   3. 把节点组建成 DOM 树

2. 解析过程中遇到图⽚、样式表、js⽂件，启动下载

3. 构建CSSOM树：

   1. 把字节流解码成字符流
   2. 通过词法分析器解释成词语，构建成CSS对象
   3. 把 CSS 对象组建成 DOM 树

4. 根据DOM树和CSSOM树构建渲染树

   1. 从DOM树的根节点遍历所有可⻅节点
   2. 对每⼀个可⻅节点，找到恰当的CSSOM规则并应⽤
   3. 发布可视节点的内容和计算样式

5. 最后解析下载完成的 js 脚本

   1. 浏览器创建Document对象并解析HTML，将解析到的元素和⽂本节点添加到⽂档中，此时document.readystate为loading
   2. HTML解析器遇到没有 async 和 defer 的 script时，同步执⾏，即在脚本下载和执⾏时解析器会暂停
   3. 当解析器遇到设置了async 的script时，会异步下载，且在下载完成后，解析器执行脚本
   4. 所有defer脚本会异步下载，并在最后按照在⽂档出现的顺序执⾏
   5. 当⽂档完成解析，document.readState变成interactive，并触发 DOMContentLoaded 事件
   6. 此时⽂档完全解析完成，浏览器可能还在等待如图⽚等内容加载，等这些内容完成载⼊并且所有异步脚本完成载⼊和执⾏，document.readState变为complete，window触发 load 事件

6. 最后执行 ajax

7. 请求