软件技术 · 知识点深化 · 前端工程化
前端性能优化：从加载到渲染的全链路优化
白屏 3 秒用户跑一半。前端性能优化分三层：加载优化（资源小、传得快）、渲染优化（少重排重绘）、交互优化（不卡帧）。这一页把 Core Web Vitals 和优化手段一次讲透。
① 怎么学（4 步走，约 65 分钟）
先建立直觉再抠细节，按这四步走最稳：
1看图建立直觉（10 分钟）
读②③：先在脑子里画出本课核心结构图。
2记完整体系（15 分钟）
读④：把对比表和公式看懂，不要急着背。
3跟例题走一遍（20 分钟）
精读⑤：看三个例题怎么用知识点解题。
4刷题纠错（剩余时间）
做⑦⑩，错题回⑥诊断。
本课小目标学完你要能：① 说出性能指标；② 优化加载速度；③ 优化渲染；④ 监控线上性能。
② 一图看懂：前端性能优化全景
读法：中心是本课主题，四条分支展开核心维度，下方是典型应用与高频易错点。
③ 本质直觉：性能优化就是"让用户少等"
用户感受到慢有三个阶段：白屏（资源没加载完）、卡顿（渲染慢）、掉帧（交互卡）。
加载：资源越小越快——压缩 JS/CSS、图片用 WebP/懒加载、gzip、CDN 缓存、Tree Shaking。
渲染：浏览器从 HTML/CSS 算 DOM/CSSOM 树→布局→绘制。避免频繁改触发重排的样式（width/top），改 transform/opacity 不触发重排。
交互：长任务超过 50ms 会卡。用 requestAnimationFrame、Web Worker、代码分片。
Core Web VitalsLCP 最大内容绘制（<2.5s）、INP 交互响应（<200ms）、CLS 累积布局偏移（<0.1）。Google 用这三个衡量体验。
④ 完整知识体系
优化手段分类
| 类别 | 手段 | 效果 |
|---|
| 加载 | 代码分割/懒加载 | 首屏体积小 |
| 加载 | gzip/brotli | 传输体积小 |
| 加载 | CDN+缓存 | 就近快 |
| 渲染 | CSS 放 head JS 放底 | 不阻塞 |
| 渲染 | transform/opacity | 不重排 |
| 交互 | Web Worker | 不阻塞主线程 |
重排 Reflow改几何属性触发重新布局，开销大
重绘 Repaint改颜色背景，不重新布局，较轻
缓存策略
强缓存 Cache-Control max-age（带 hash 的资源长缓存）；协商缓存 ETag/Last-Modified（HTML 不缓存）。
⑤ 应用场景与例题
例1 首屏 JS 3MB 怎么优化？
路由懒加载、Tree Shaking、按需引入 UI 库、vendor 抽离、gzip、CDN。
例2 频繁改 top 导致页面卡顿
top 触发重排。改用 transform: translate，不触发重排，GPU 合成。
例3 图片很多加载慢
懒加载（loading=lazy）、WebP、响应式尺寸、CDN。
做题心法先测量（Lighthouse/Performance），再针对性优化，别盲目。
⑥ 高频错误诊断（4 条）
错误1：所有资源都长缓存HTML 不缓存否则发版用户看不到。
错误2：频繁改 width/top触发重排，掉帧。用 transform。
错误3：JS 放 head 不 async阻塞 HTML 解析，白屏久。
错误4：不监控线上性能实验室数据和真实用户不同，要 RUM。
⑦ 考点真题演练（5 题）
考点分布
| 考法 | 出题形式 | 应对 |
|---|
| 指标 | 问 Core Web Vitals | LCP/INP/CLS |
| 渲染 | 问重排触发 | 几何属性 |
| 加载 | 问 gzip 作用 | 压缩传输体积 |
| 缓存 | 问 HTML 怎么缓存 | 协商缓存不缓存 |
真题basic1. 以下哪个会触发重排？
真题mid2. 首屏 JS 体积大不应该？
真题mid3. HTML 文件应该怎么缓存？
真题hard4. 长任务阻塞主线程怎么解？
真题hard5. LCP 指什么？
⑧ 必背知识点卡
三层：加载、渲染、交互
指标：LCP <2.5s，INP <200ms，CLS <0.1
加载：分割+压缩+CDN+缓存
重排：改几何属性触发 用 transform
重绘：改颜色较轻
缓存：hash 资源长缓存，HTML 不缓存
监控：RUM 真实用户数据
⑨ 动手输出：诊断一个慢页面
场景：用户反馈页面打开 5 秒。
① 测量：Lighthouse 跑一遍看哪个指标差。
② 白屏久：资源加载慢，看 JS/CSS 体积。
③ 交互卡：Performance 面板找长任务。
④ 布局偏移：图片没设尺寸导致 CLS。
⑤ 优化：针对性分割/压缩/懒加载。
口述思路没测量就优化是瞎优化。
⑩ 分层练习（基础 + 中档 + 拔高）
▍基础 6 题
基础1Core Web Vitals 三个指标？
LCP、INP、CLS。
基础2什么触发重排？
改几何属性 width/top。
基础5图片懒加载属性？
loading=lazy。
基础6JS 阻塞什么？
放 head 阻塞 HTML 解析。
▍中档 5 题
中档1transform 为什么不重排？
走 GPU 合成层，不触发布局。
中档3强缓存和协商缓存区别？
强缓存不发请求；协商缓存问服务器。
中档4为什么用 WebP？
比 JPG/PNG 小 30%。
中档5Web Worker 作用？
把计算放后台线程，不卡 UI。
▍拔高 5 题
拔高1重排和重绘关系？
重排一定重绘，重绘不一定重排。
拔高2关键渲染路径？
HTML->DOM->CSSOM->渲染树->布局->绘制。
拔高3preload 和 prefetch 区别？
preload 当前页要；prefetch 未来可能用。
拔高5RUM 是什么？
真实用户监控，收集线上性能数据。
⑪ 记忆口诀 + 7 天复习计划
三句口诀① 加载渲染交互三层，先测量再优化。② 重排贵用 transform，gzip 压传输。③ 资源长缓存 HTML 不缓存。
| 天 | 任务 | 自检 |
|---|
| 第 1 天 | 读②③，画渲染路径 | 六步说清 |
| 第 2 天 | 背优化表 + 基础 6 题 | 手段记住 |
| 第 3 天 | 做中档 5 题，跑一次 Lighthouse | 会看报告 |
| 第 4 天 | 做拔高 5 题，解释重排重绘 | 区别说清 |
| 第 5 天 | 做⑦真题 5 题 | 限时每题 2 分钟 |
| 第 6-7 天 | 合书口述 Core Web Vitals | 不看资料 |
← 返回软件技术总览