浏览器输入 url 到页面显示的过程
- 查找缓存
- 浏览器缓存:浏览器会记录 DNS 一段时间
- 强缓存:直接从本地副本比对读取,不去请求服务器,返回的状态码是 200。
- 协商缓存:会去服务器比对,若没改变才直接读取本地缓存,返回的状态码是 304。
- 操作系统缓存:如果浏览器没有这个DNS记录,则会到操作系统缓存中查找
- 路由器缓存
- ISP缓存
- 浏览器缓存:浏览器会记录 DNS 一段时间
- DNS 域名解析
- 浏览器向DNS服务器发起请求,解析URL,得到域名对应的IP地址
- 建立TCP链接(三次握手)
- 浏览器向服务器发送 SYN 报文,请求连接,浏览器进入SYN_SENT 状态
- 服务器收到浏览器的 SYN 报文,给浏览器发送一个 SYN+ACK 确认报文,进入 SYN_RECV 状态
- 浏览器收到服务器的 SYN+ACK 报文,向服务器发送一个 ACK,发送完毕,连接建立
- 发起请求http / https
- 服务器响应请求并返回结果
- 关闭TCP 链接(四次挥手)
- 浏览器发送释放连接报文,浏览器进入 FIN-WAIT-1等待1状态
- 服务器收到释放连接报文,发出确认报文,服务器进入 CLOSE-WAIT(等待关闭状态);浏览器收到确认报文,浏览器进入 FIN-WAIT-2 等待2 状态,等待服务器发送释放连接报文
- 服务器发送数据完成后,向浏览器发送 释放连接报文,服务器进入LAST-ACK 最后确认状态,等待浏览器的确认
- 浏览器收到服务器的连接释放报文,发出确认报文,浏览器进入 TIME-WAIT时间等待状态,此时浏览器的TCP连接还没释放,需要经过 2**MSL(最长报文段寿命)的时间后,才会进入 CLOSED状态;服务器收到确认报文立即进入 CLOSED 状态。
- 浏览器对服务器返回的HTML内容进行解析渲染
- 构建DOM树
- 构建CSSOM树(css规则树)
- 合并DOM树和CSSOM树,得到render树
- 回流:根据render树得到每个树节点的几何信息
- 重绘:遍历render树进行UI渲染