JiangBei's Notes

Appearance

浏览器的渲染原理 ​

从URL输入到页面展示的完整过程 ​

当用户在浏览器地址栏输入一个URL并按下回车键后，浏览器会经历一系列复杂的过程，最终将网页内容呈现在屏幕上。这个过程可以分为以下几个主要阶段：

1. URL解析与处理 ​

  1. 输入处理：浏览器接收用户输入的URL
  2. URL解析：解析URL的各个组成部分（协议、域名、路径等）
  3. URL补全：如果输入的是搜索词，自动补全为搜索URL；如果缺少协议，自动添加http://或https😕/

2. DNS域名解析 ​

  1. 缓存查询：首先检查浏览器缓存、操作系统缓存、本地hosts文件
  2. 递归查询：如果缓存中没有，向本地DNS服务器发起查询
  3. 迭代查询：本地DNS服务器向根域名服务器、顶级域名服务器、权威域名服务器进行迭代查询
  4. IP地址获取：最终获取到目标服务器的IP地址

3. 建立TCP连接 ​

  1. 三次握手：
    • 客户端发送SYN包
    • 服务器返回SYN+ACK包
    • 客户端发送ACK包
  2. TLS/SSL握手：如果是HTTPS协议，还需要进行TLS/SSL握手建立安全连接

4. 发送HTTP请求 ​

  1. 请求构建：构建HTTP请求报文，包含请求方法、URL、HTTP版本、请求头、请求体等
  2. 请求发送：通过已建立的TCP连接发送HTTP请求

5. 服务器处理与响应 ​

  1. 请求接收：服务器接收HTTP请求
  2. 请求处理：服务器根据请求路径处理请求，可能涉及到动态内容生成、数据库查询等
  3. 响应构建：构建HTTP响应报文，包含状态码、响应头、响应体等
  4. 响应发送：服务器将响应发送回客户端

6. 浏览器接收与解析 ​

  1. 响应接收：浏览器接收服务器返回的响应
  2. 响应解析：解析HTTP响应头，处理状态码、响应类型等
  3. 内容处理：根据Content-Type决定如何处理响应内容

7. HTML解析与DOM树构建 ​

  1. 词法分析：将HTML文本分解为标记（tokens）
  2. 语法分析：将标记转换为节点（nodes）
  3. DOM树构建：将节点组织成DOM树结构
  4. 错误处理：处理HTML语法错误，浏览器会自动修复常见错误

8. CSS解析与CSSOM树构建 ​

  1. CSS加载：加载外部CSS文件、内联CSS和style标签中的CSS
  2. CSS解析：解析CSS规则，生成CSSOM（CSS对象模型）树
  3. CSS优先级计算：计算CSS规则的优先级，处理样式冲突

9. 渲染树构建 ​

  1. DOM与CSSOM结合：将DOM树和CSSOM树结合，生成渲染树（Render Tree）
  2. 节点过滤：过滤掉不可见的节点（如script标签、display:none的元素）
  3. 样式计算：为每个可见节点计算最终的样式

10. 布局计算（Layout） ​

  1. 盒模型计算：计算每个元素的位置和大小
  2. 布局树构建：生成布局树（Layout Tree），包含每个元素的几何信息
  3. 回流（Reflow）：当元素位置或大小发生变化时，重新计算布局

11. 绘制（Paint） ​

  1. 绘制命令生成：为每个元素生成绘制命令
  2. 绘制执行：按照绘制命令在屏幕上绘制元素
  3. 重绘（Repaint）：当元素样式发生变化但不影响布局时，重新绘制

12. 合成与展示 ​

  1. 图层合成：将页面分解为多个图层，提高渲染性能
  2. GPU加速：利用GPU进行图层合成，提高渲染速度
  3. 页面展示：将最终合成的图像显示在屏幕上

13. 交互处理 ​

  1. 事件处理：处理用户的点击、滚动等交互事件
  2. JavaScript执行：执行页面中的JavaScript代码
  3. DOM操作：处理JavaScript对DOM的修改
  4. 重新渲染：当DOM或样式发生变化时，触发重新渲染流程

关键优化点 ​

  1. DNS预解析：提前解析域名，减少DNS查询时间
  2. TCP连接复用：使用HTTP/1.1的keep-alive或HTTP/2的多路复用
  3. 资源压缩：压缩HTML、CSS、JavaScript文件
  4. 资源缓存：合理设置缓存策略，减少重复请求
  5. 懒加载：延迟加载非关键资源
  6. 减少DOM操作：批量处理DOM操作，减少回流和重绘
  7. CSS优化：避免使用复杂选择器，减少CSS解析时间
  8. JavaScript优化：减少DOM操作，使用事件委托，避免阻塞渲染

浏览器渲染引擎 ​

不同浏览器使用不同的渲染引擎：

  • Chrome：Blink
  • Firefox：Gecko
  • Safari：WebKit
  • Edge：Blink（基于Chromium）

虽然具体实现细节不同，但基本的渲染原理和流程是相似的。

总结 ​

浏览器的渲染过程是一个复杂而精细的系统工程，涉及多个阶段的协同工作。理解这个过程有助于我们开发出性能更好的网页，提升用户体验。从URL输入到页面展示，每一个环节都有优化的空间，通过合理的技术手段，可以显著提升网页的加载速度和渲染性能。