前端网络面试：浏览器输入地址后发生了什么？

理解整块的内容涉及到的 UDP、TCP 以及 http、https 相关知识

1. 请求前

1. 浏览器自动补全协议、端口
2. 浏览器自动完成 url 编码
3. 浏览器根据 url 地址查找本地缓存，根据缓存规则看是否命中缓存
   1. 若命中缓存则直接使用缓存，不再发出请求
   2. 未命中直接请求
4. 通过 DNS 解析找到服务器的 IP 地址
5. 浏览器向服务器发出建立 TCP 连接的申请，完成三次握手，连接通道的建立
6. 若使用了 Https 协议，则还会进行 SSL 握手（认证），建立加密通道。使用 SSL 握手时，会确定是否使用 Http2

2. 请求过程

1. 浏览器会决定要附带哪些 cookie 到请求头中
2. 浏览器会自动设置好请求头、协议版本、 cookie ，并发送一个 GET 请求
3. 服务器处理后，进入后端处理流程。完成处理后，服务器响应一个 HTTP 报文给浏览器
4. 浏览器根据使用的协议版本，以及 Connection 字段的约定，决定是否要保留 TCP 连接
5. 浏览器根据响应状态码决定如何处理这一次响应
6. 浏览器根据响应头中的 Content-Type 字段识别响应类型，如果是 text/html ，则对响应体的内容进行 HTML 解析，否则做其他处理
7. 浏览器根据响应头的其他内容完成缓存、 cookie 的设置

3. 请求后

1. 浏览器开始从上到下解析 HTML，若遇到外部资源链接，则进一步请求资源
2. 解析过程中
   1. 生成 DOM 树， CSSOM 树，
   2. 然后一边生成一边把二者合并为渲染树（ rendering tree ），
   3. 随后对渲染树种的每个节点计算位置和大小（ reflow ），
   4. 最后把每个节点利用 GPU 绘制到屏幕（ repaint ）
3. 在解析过程中还会出发一系列的事件，当 DOM 树完成渲染后会触发 DOMContentLoaded 事件，当所有资源加载完毕后会触发 load 事件

5. 补充 TCP vs UDP

TCP：面相连接确认 UDP：面相连接传输

1. 连接
   1. TCP 是面相连接的，
   2. UDP 是无连接的，即发送数据群不需要建立连接
2. 服务
   1. TCP 提供可靠的服务，通过 TCP 连接传送的数据，无差错，不丢失，不重复，且按序到达
   2. UDP 尽最大努力交付，即不保证可靠交付
3. 数据
   1. TCP 是面向字节流
   2. UDP 面相报文，并且网络出现阻塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如 IP 电话和视频会议等）
4. 连接数
   1. TCP 只能是 1 对 1 的
   2. UDP 支持 1 对 1，1 对多
5. 大小
   1. TCP 首部较大为 20 字节
   2. UDP 8 字节

6. http、https

http 是明文传输协议，https 协议是由 ssl + http 协议构建的可进行加密传输、身份认证的网络协议，比 http 协议安全。

https 原理

• 客户端拥有私钥 A，服务端拥有公钥 B（用于加密）和公钥 C（用于解密）
• 客户端向服务端发送请求，服务端会把公钥 B 传给客户端
• 客户端拿到公钥 B 后，用公钥 B 加密密钥 A，形成一段密文，然后把密文传给服务器
• 公钥 B 的密文，只有私钥 C 才能解密
• 服务端解密后，就得到了私钥 A
• 这时候客户端和服务端就可以通过密钥 A 来进行加密解密。