性能不是调参，是懂浏览器#

新人优化靠”听说加个 will-change""换个框架”，结果没改善。真正的优化来自：知道代码在浏览器里怎么跑，瓶颈就在哪一环。

1
浏览器与性能
2

3
├── 渲染原理
4
│   ├── 渲染流水线（DOM→绘制→合成）
5
│   ├── 重排 / 重绘 / 合成层
6
│   └── 事件机制（捕获/冒泡/委托）
7
├── 存储与网络
8
│   ├── 浏览器存储（Cookie/LS/IndexedDB）
9
│   ├── 网络与 HTTP 缓存
10
│   └── 跨域与安全（CORS/CSP/XSS/CSRF）
11
└── 性能优化
12
    ├── 性能指标（FCP/LCP/CLS/TTFB）
13
    ├── 加载性能优化
14
    ├── 运行时性能
15
    ├── Web Workers
16
    └── 首屏优化实战

我排查过最典型的几类问题#

• 白屏：资源 404 / JS 报错阻断渲染 / 大图阻塞首屏。
• 卡顿：长任务占主线程、频繁重排、滚动时大量 DOM 操作。
• 布局跳动：图片无宽高导致 CLS 抖动，用户点错按钮。
• 慢得离谱：没开缓存、重复请求、未压缩资源。

怎么读#

• 01–03 是渲染与事件原理，优化的地基。
• 04–06 是存储/网络/安全，前端绕不开。
• 07–11 是性能优化实战，按指标驱动。

小结#

性能优化的前提是对浏览器运行机制有”画面感”。下一篇从最关键的——渲染流水线讲起：从你写的 HTML/CSS/JS 到像素上屏，中间经历了什么。