输入 URL 到页面渲染经历了什么
用户输入
判断用户在地址栏输入的是关键词还是请求的 URL
- 如果是搜索内容，地址栏会使用默认的搜索引擎，合成带搜索关键词的 URL
- 如果输入的内容符合 URL 规则，就会加上协议，合成完整的 URL
DNS 解析（优先走缓存）
- 找浏览器 DNS 缓存解析域名
- 找本机DNS缓存
# 备注：查看本机DNS缓存命令：ipconfig > C:/dns.txt# 或displaydns > C:/dns.txt- 找路由器DNS缓存
- 找运营商DNS缓存（80%的DNS查找，到这一步就结束）
- 递归查询（查询全球13台根DNS服务器）
DNS 解析用于获取请求域名的 IP 地址。如果请求协议是HTTPS，那么还需要建立TLS连接。
TCP 连接（三次握手）
TCP 连接需要进行三次握手，根据 ip 地址进行
- 第一次握手：由浏览器发给服务器，我想和你说话，你能“听见”嘛？
- 第二次握手：由服务器发给浏览器，我能听得见，你说吧！
- 第三次握手：由浏览器发给服务器，好，那我就开始说话。
发送请求（请求报文）
连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。
响应报文
URL请求的数据类型，有时候是一个下载类型，有时候是正常的HTML页面。
我们可以通过 Content-Type 字段进行区别。Content-Type 是HTTP头中一个非常重要的字段， 它告诉浏览器服务器返回的响应体数据是什么类型，然后浏览器会根据 Content-Type 的值来决定如何显示响应体的内容.
浏览器开始解析 HTML
- 预解析：将所有外部的资源，发请求出去
- 解析 html，生成 DOM 树
- 解析 CSS，生成 CSS 树
- 合并成一个 render 树
- js 是否操作了 DOM 或样式
- 有：进行重绘重排（不好，1.尽量避免；2.最小化重绘重排）
- 没有：null
- 最终展示界面
断开 TCP 连接（四次挥手）
四次挥手是为了确保数据的完整性
- 第一次挥手：由浏览器发给服务器，我的东西接受完了，你断开吧。
- 第二次挥手：
- 由服务器发给浏览器，我还有一些东西没接收完，你等一会，我接收好了我告诉你
- 由服务器发给浏览器，我的东西接收完了，但是你还得等一会，我要验证数据的完整性，验证完了我告诉你。
- 第三次挥手：由服务器发给浏览器，我接收完（验证完）了，你断开吧。
- 第四次挥手：由浏览器发给服务器，好的，那我断开了。
为什么握手要三次，挥手要四次？
握手之前，还没有进行数据的传输，确保握手就可以了。
挥手之前，正在进行数据的传输，为了确保数据的完整性，必须多经历一次验证（继续接收）
总结
- 用户输入url并回车
- 浏览器进程检查url，组装协议，构成完整的url
- 进行 DNS 解析，获取 ip 地址
- 利用 ip 地址和服务器进行 tcp 连接
- 构建请求头信息，发送请求头信息
- 服务器响应后，网络进程接收响应头和响应信息，并解析响应内容
- 解析 HTML，生成 DOM 树和 CSS 树，合成一个 render 树，进行页面渲染
- 断开 tcp 连接，确保数据完整性