浏览器工作过程及相关名词

网页获取

在计算机网络中，双方通过知道彼此的 IP 地址，即可建立通信
- 通信协议包括 TCP 与 UDP 两种，其中：
  TCP 建立连接过程如下（三次握手）：
  
  sequenceDiagram participant A participant B A->>B: SYN B->>A: SYN, ACK A->>B: ACK
  TCP 断开连接过程如下（四次挥手）：
  
  sequenceDiagram participant A participant B A->>B: FIN B->>A: ACK A->>B: FIN B->>A: ACK
IP 地址不便记忆，因此使用域名代替，IP 地址与域名一一对应，形成域名表，即 hosts 文件内容
```
127.0.0.1 mycomputer1.com
127.0.0.1 mycomputer2.com
```
- 协议+域名+端口号+路径+查询字符串+锚点 = URL，如 https://www.example.com:443/search?q=str#main
域名表存储有上限，且不便跨设备共享，因此需要域名服务器
域名服务器采用分布式数据库的形式存储各种域名，并根据域名段进行划分，如 example.com 可拆分为 com、example.com 域名段
为提高查询速度，运营商会建立代理服务器，通过缓存机制缩短查询响应时间
- 域名服务器分四种
  - 本地服务器（代理服务器）
  - 根服务器
  - 顶级域名服务器（如 com、org 等）
  - 权威域名服务器（如 example.com 等）
域名服务器共同组成 DNS 服务，解决了客户端查询 IP 的问题
- 浏览器缓存与计算机缓存会将部分域名表进行缓存，并非每次都需要使用 DNS 服务
双方的请求数据与响应数据均采用约定好的格式，即 HTTP
明文传输的数据在各个路由器之间传递过程中，容易被截获、篡改，因此需要对内容进行加密处理
一般采用非对称加密方法，为防止中间人攻击，需要保护并传输域名与公钥等信息，因此产生了 CA 机构
CA 机构将域名与公钥等信息，将内容经过哈希处理后，产生的哈希结果采用非对称加密技术加密，制成 CA 证书并传输给接收方，之后将证书密钥传输给发送方
由于非对称加密计算量大、密文长，因此普遍采用对称加密，并使用非对称加密处理对称加密的密钥，这一过程称为 RSA 密钥交换
为提升性能，目前采用 DH 密钥交换，并添加约定好的随机数（防止伪造）生成密钥，该密钥称为主密钥
主密钥不可用于加密，需要将主密钥再合成一次，并派生出两个密钥，分别为客户端密钥与服务端密钥
- 不可用于加密：当攻击者无法解密时，将加密数据重新发送给发送方，造成发送方事务紊乱
在以上两个密钥基础上，还需要派生出其他密钥：
1. MAC Key：验证数据
2. Client IV、Server IV：加密初始化向量
自第 11 步至此称为 TLS1.2 加密流程，此时放弃了非对称加密方法
- TLS1.3 将所有加密材料与随机数等合并发送
- TLS 是 SSL 的延展，完善了 SSL 的安全漏洞
HTTP 结合 TLS 构成了 HTTPS
- HTTPS 优点：加密数据处理，支持身份验证、提高 SEO 排名、获得用户信任、提高服务器防护
- HTTPS 缺点：技术难度大、证书成本高、资源占用多、性能影响大、加密范围有限，HTTP 仍存在
HTTP/1.0 中，每次请求都会建立各自的 TCP 连接，造成资源浪费，因此 HTTP/1.1 通过连接保持机制补全了这一缺点，并采用管线化机制进一步提高了请求效率
- 连接保持机制：请求完成后，允许下一个请求继续使用此条连接
- 管线化机制：允许多个请求一起发出，无需等待上一个请求响应
HTTP/2 则在 HTTP/1.1 基础上，将单个请求数据进行拆分，接收方接收后按顺序重组，解决了数据包大小不一导致效率变低的问题
HTTP/2 在拆分时，将数据分为头部帧和数据帧，而头部帧具有重复性，因此可以引入 HPACK 头部压缩
HTTP/3 采用了 UDP 通信协议，并实现了 QUIC 连接协议
- UDP 规避了 TCP 的队头堵塞问题
- QUIC 本质上是将连接建立过程与 TLS 过程融合

网页渲染

前五步统称为关键渲染路径

解析 HTML 文档并构建 DOM 树(Document Object Model)
- DOM 树是 HTML 文档在浏览器中的对象表示，可以被 JavaScript 操作（参考 Web APIs | SRIGT）
- 解析过程仅有一个主线程，其过程顺序执行（自上而下）
- 遇到 <script> 会执行其中的代码，执行时主线程停止解析，直至代码执行完成
- 另外有预扫描线程，负责扫描 HTML 文档，并提前将引用的外部文件采用异步方式下载
解析 CSS 并构建 CSSOM 树(CSS Object Model)
- CSSOM 树是 CSS 在浏览器中的对象表示
从 DOM 根节点开始，合并 DOM 与 CSSOM，形成渲染树(render tree)
浏览器根据渲染树中，每个元素节点的样式，计算每个可见节点的布局（宽高、位置等）
- 可见节点：其 display 样式不是 none 的节点
- 对于未设置宽高的图片，首先按非可见节点处理，当图片加载完成后，重新计算布局，此过程称为重排(reflow)
在第一次完成布局后，浏览器会将元素节点及其样式绘制在屏幕上
- 重绘(repaint)指将变化的布局重新绘制，主要在以下情况下触发：
  1. 重排
  2. 组合，即渲染过程中出现新的图层需要组合，包括重排
重排与重绘合称回流(layout thrashing)
被标记 async、defer 等的 <script> 开始加载并执行

完整加载过程

以目前广泛使用的 HTTP/2 为例

在浏览器中，输入 URL 指定目标网页
先通过本地缓存或 DNS 服务，根据 URL 获取对应的 IP 地址
通过 CA 证书与 DH 密钥交换，完成 TLS
根据 TCP 建立连接，由浏览器发起 HTTP(S) 请求
接收到响应的 HTML 文档后，根据 TCP 断开连接
浏览器将 HTML 文档渲染并展示

graph LR URL--domain<br/>name-->本地缓存或DNS--IP-->1["CA & DH & TLS"]--encrypted<br/>request<br/>data-->TCP--encrypted<br/>response<br/>data-->2["CA & DH & TLS"]-->Browser

-End-

posted @ 2024-07-16 20:19 SRIGT 阅读(28) 评论(0) 编辑收藏举报

刷新页面返回顶部