知识库

Appearance

浏览器进程与渲染 ​

多进程架构 · 单线程原因 · URL→页面 · CRP · 资源加载 · defer/async · 复合层 · 硬件加速

一、多进程架构（Chrome 2008 起） ​

  • 打开一个 Tab 至少 4 个进程：浏览器主进程、GPU 进程、网络进程、渲染进程
进程职责
浏览器进程（Browser Process）界面显示、用户交互、子进程管理、存储
渲染进程（Renderer Process）HTML/CSS/JS → 可交互网页，包含 Blink + V8，运行在沙箱
GPU 进程3D CSS 效果、网页和 UI 界面的 GPU 绘制
网络进程（Network Process）页面网络资源加载
插件进程每种插件类型一个进程，隔离崩溃影响

多进程优势：进程隔离（单页崩溃不影响全局）、JS 阻塞只影响当前页、关闭页面整个渲染进程被回收、沙箱机制限制系统权限

多进程缺点：更高内存占用，每个进程有公共基础结构副本

渲染进程内部线程：主线程、GUI 渲染线程、事件触发线程、定时器线程、HTTP 请求线程

为什么 JS 是单线程？ ​

  • JS 为处理用户交互、操作 DOM 树和 CSS 样式树而诞生
  • 多线程同时操作同一 DOM 节点（一个修改、一个删除），浏览器无法裁决
  • 为避免引入锁机制的复杂性，JS 选择了单线程
  • 推论：GUI 渲染线程与 JS 引擎线程互斥 → JS 执行时间过长会导致页面渲染不连贯

二、从输入 URL 到页面展示 ​

  1. URL 解析：判断是 URL 还是搜索关键词
  2. DNS 查询：域名 → IP 地址（浏览器缓存 → 系统 hosts → 本地 DNS → 根服务器递归查询）
  3. TCP 连接：三次握手（SYN → SYN-ACK → ACK）
  4. TLS 协商（仅 HTTPS）：协商加密算法、验证证书、建立安全连接
  5. HTTP 请求：发送请求到服务器
  6. 服务器响应：处理请求，返回 HTTP 响应（TTFB 首字节时间）
  7. 页面渲染：
    • 解析 HTML 构建 DOM 树（Bytes → characters → tokens → nodes → DOM）
    • 解析 CSS 生成 CSSOM 规则树
    • 合并 DOM + CSSOM 生成 render 树（排除 display:none、head 等不可见节点）
    • 布局（Layout/reflow）：计算元素尺寸位置坐标
    • 绘制（paint）：像素信息
    • 合成（composite）：GPU 合成显示

三、关键渲染路径（CRP）优化 ​

优化策略：

  1. 优化 DOM：删除不必要代码/注释/空格，GZIP 压缩
  2. 优化 CSSOM：减少关键 CSS 体积，非关键 CSS 标记为 media 查询
  3. 优化 JS：消除阻塞渲染的 JS（async/defer），将非关键 JS 延迟执行
  4. 优化关键字节：缩小压缩文件减少下载时间

资源加载对渲染的影响 ​

资源阻塞 DOM 解析阻塞渲染备注
CSS不阻塞阻塞（等 CSSOM 才构建 render 树）media query 声明的 CSS 不阻塞
JS（普通）阻塞阻塞必须下载执行完才继续解析
JS（async）不阻塞无序加载完立即执行
JS（defer）不阻塞按序DOM 解析完毕后按顺序执行
img不阻塞不阻塞异步下载，下载完替换位置

defer vs async 对比 ​

特性deferasync
执行顺序按文档中的顺序加载优先（谁先下完谁先执行）
DOMContentLoadedDOM 解析完毕后、DOMContentLoaded 之前不相关，可能在之前或之后
适用场景需要完整 DOM 或依赖执行顺序的脚本独立的第三方脚本（统计、广告）
  • <link rel="preload">：告诉浏览器尽早请求当前页面必需的关键资源，不阻塞 onload；必须设置 as 属性
  • <link rel="prefetch">：利用浏览器空闲时间静默下载后续页面可能需要的资源，存入缓存

document.readyState 状态 ​

状态含义对应事件
loading正在解析 HTML，构建 DOM 树—
interactiveDOM 解析完毕，defer 脚本按顺序执行DOMContentLoaded
complete所有资源（含图片、异步脚本）加载完毕load

四、复合层与硬件加速 ​

  • 默认只有一个复合图层，所有 DOM 节点都在其下
  • 开启硬件加速（transform: translate3d()、will-change）可将节点提升为独立复合图层
  • 复合图层间绘制互不干扰，由 GPU 直接控制
  • 仅触发合成的 CSS 属性（不回流不重绘）：只有 transform 和 opacity

内存占用：每个复合层需缓存图像数据（宽 × 高 × 4 字节），不可滥用

动画优化技巧：

  1. 避免隐式合成：保持动画对象 z-index 尽可能高
  2. 动画中只使用 transform 和 opacity
  3. will-change 慎用，滥用会大幅增加内存

性能优化完整内容详见 性能优化专题

相关 ​