34.输入一个 URL 到渲染

1、URL 解析

• 用户输入：在地址栏输入 https://www.example.com/index.html。

解析协议和域名：浏览器解析协议（HTTP/HTTPS）、域名（www.example.com）和路径（/index.html）。

2、DNS 查询（域名解析）

• 浏览器缓存：首先检查浏览器缓存是否有该域名的 IP 记录。

• 系统缓存：若无，查询操作系统（如本地 hosts 文件）和路由器缓存。

• ISP DNS 缓存：向互联网服务提供商（ISP）的 DNS 服务器发起查询。

• 递归查询：若 ISP 无缓存，从根域名服务器开始逐级查询：

• 根域名服务器：返回 .com 顶级域名服务器的地址。

• 顶级域名服务器：返回 example.com 的权威域名服务器地址。

• 权威域名服务器：返回 www.example.com 的 IP 地址。

• 结果缓存：最终 IP 存入各级缓存（按 TTL 过期时间）。

3、建立TCP连接

• 浏览器向服务器发起 TCP 连接请求，三次握手建立连接。

• 三次握手：浏览器发送一个带 SYN 标志的 TCP 包给服务器，服务器收到后回传一个带有 SYN/ACK 标志的 TCP 包以示传达确认信息，浏览器再回传一个带 ACK 标志的 TCP 包，代表握手结束。

4、发出 HTTP 请求

浏览器向服务器发送 HTTP 请求，请求所需的 HTML 文件。

5、服务器处理请求

• Web 服务器（如 Nginx）：根据路径找到对应的静态文件或转发给应用服务器（如 Node.js）。

• 应用服务器：处理动态请求（如查询数据库），生成 HTML 响应。

6、接收 HTTP 响应

• 响应报文：包含状态码（200 OK）、响应头（Content-Type、Cache-Control）、响应体（HTML内容）。

7、浏览器解析与渲染

1. 构建 DOM 树

• HTML 解析：将 HTML 字符串转换为 DOM 树。

• 词法分析：将字符流转换为标签（Tokens）。

• 语法分析：根据标签嵌套关系生成 DOM 节点树。

2. 构建 CSSOM 树

• 解析 CSS：将 CSS 规则转换为 CSSOM 树（样式表结构）。

• 阻塞渲染：CSS 解析会阻塞页面渲染，直到 CSSOM 构建完成。

3. 生成渲染树（Render Tree）

• 合并 DOM 和 CSSOM：仅包含可见节点（如排除 display: none 的元素）。

4. 布局（Layout/Reflow）

• 计算几何信息：确定每个节点在屏幕上的位置和大小（如宽度、高度、坐标）。

5. 绘制（Painting）

• 填充像素：将渲染树转换为屏幕上的实际像素（如颜色、边框、阴影）。

8、重排（Reflow）与重绘（Repaint）

1. 重排（Reflow）：重新计算元素的几何属性，导致布局变化。触发条件：修改影响布局的属性

width, height, margin, padding, left, top, font-size

2. 重绘（Repaint）：仅更新元素的绘制属性，不改变布局。触发条件：修改不影响布局的样式

color, background-color, visibility, border-radius

3. 性能影响：重排比重绘代价更高，可能触发整个渲染树的重新计算。