前端性能优化复习

文章目录

一、性能优化核心
- - [1. 三大核心体验指标](#1. 三大核心体验指标)
  - [2. 辅助基础指标](#2. 辅助基础指标)
  - [3. 常用排查工具](#3. 常用排查工具)
二、网络加载优化
- - [1. 资源极致压缩，减小传输体积](#1. 资源极致压缩，减小传输体积)
  - [2. 缓存策略：让资源一次加载、多次复用](#2. 缓存策略：让资源一次加载、多次复用)
  - [3. 网络协议与分发优化](#3. 网络协议与分发优化)
  - [4. 智能资源加载策略](#4. 智能资源加载策略)
三、浏览器渲染优化：解决页面卡顿、抖动、掉帧
- - [1. 回流与重绘核心优化](#1. 回流与重绘核心优化)
  - [2. CSS 渲染优化](#2. CSS 渲染优化)
  - [3. 解决布局偏移问题](#3. 解决布局偏移问题)
四、运行时优化
- - [1. JS 执行优化，释放主线程](#1. JS 执行优化，释放主线程)
  - [2. 防抖与节流](#2. 防抖与节流)
  - [3. 内存泄漏优化](#3. 内存泄漏优化)
  - [4. 框架专属优化（Vue/React）](#4. 框架专属优化（Vue/React）)
五、工程构建优化
- - [1. 基础工程优化](#1. 基础工程优化)
  - [2. 第三方依赖优化](#2. 第三方依赖优化)
  - [3. 问题排查](#3. 问题排查)
六、高阶优化：架构级性能升级
- - [1. 渲染架构优化](#1. 渲染架构优化)
  - [2. 数据请求优化](#2. 数据请求优化)
七、性能监控与持续迭代
八、面试核心考点极简总结
- - [1. 首屏加载慢排查思路](#1. 首屏加载慢排查思路)
  - [2. 回流重绘核心考点](#2. 回流重绘核心考点)
  - [3. 懒加载与预加载区别](#3. 懒加载与预加载区别)
九、总结

一、性能优化核心

1. 三大核心体验指标

LCP（最大内容绘制）：衡量页面加载速度，指页面最大可视元素渲染完成的时间，优秀标准：≤2.5s。LCP 过长，直接导致用户觉得页面白屏、加载慢。
INP（交互响应时间）：衡量页面交互流畅度，替代旧指标FID，统计用户点击、输入、滑动后的页面响应延迟，优秀标准：≤200ms。INP 过高，页面操作卡顿、延迟严重。
CLS（累积布局偏移）：衡量页面视觉稳定性，统计页面元素意外偏移的累积分值，优秀标准：≤0.1。图片、接口数据动态渲染导致的页面抖动，都是CLS超标问题。

2. 辅助基础指标

FP（首次绘制）、FCP（首次内容绘制）判断白屏时长；TTI（完全可交互时间）判断页面是否假死卡顿。

3. 常用排查工具

本地调试用 Chrome DevTools 的 Performance、Network、Lighthouse；线上真实用户性能监控用 RUM 日志、Web Vitals 官方SDK。

二、网络加载优化

首屏加载卡顿、白屏时间长，绝大多数问题都出在网络层面。核心优化思路：缩体积、减请求、强缓存、快分发。

1. 资源极致压缩，减小传输体积

传输体积越小，加载速度越快，是最直接有效的优化手段。

开启传输压缩：服务端、Nginx、CDN 统一开启 Brotli/Gzip 压缩，JS、CSS、HTML、文本类资源压缩率可达70%以上，Brotli 压缩效率优于 Gzip，优先使用。
图片格式精细化优化：舍弃传统 JPG/PNG，首屏图片使用 WebP/AVIF 高效格式，自动兼容降级；严格匹配图片展示尺寸，禁止大图小用、缩放展示，避免资源浪费。
代码精简：生产环境剔除注释、空行、console、debug 冗余代码，压缩字体文件、第三方静态资源。

2. 缓存策略：让资源一次加载、多次复用

缓存是性能优化性价比最高的方案，核心是区分强缓存和协商缓存，精准配置规则。

强缓存：通过 Cache-Control、Expires 实现，命中后直接读取本地缓存，不发送任何网络请求，速度最快。
协商缓存：通过 ETag/If-None-Match、Last-Modified 实现，强缓存失效后校验资源是否更新，未更新返回304，无需重新下载资源。
最佳落地规范：静态资源（JS/CSS/图片）添加哈希后缀，设置长期强缓存；入口 HTML、动态配置文件禁用强缓存，保证内容实时更新。
进阶方案：通过 ServiceWorker 实现离线缓存、精准资源拦截，适配弱网、离线场景，大幅提升重复访问速度。

3. 网络协议与分发优化

升级 HTTP/2 或 HTTP/3，解决 HTTP1.1 队头阻塞问题，支持多路复用、并行请求，大幅提升多资源同时加载效率。
所有静态资源托管 CDN，实现就近节点分发，减少跨地域网络延迟，减轻源站压力。
域名收敛，减少静态资源域名数量，避免频繁DNS解析带来的额外耗时。

4. 智能资源加载策略

懒加载：非首屏图片、视频开启原生 loading="lazy"；路由、非核心组件采用懒加载，仅渲染当前页面所需资源，减少首屏加载压力。
预加载/预解析：核心关键资源用 preload 提前加载，DNS预解析、域名预连接，提前消除网络延迟。
按需拆分：杜绝一次性加载全量业务代码，通过代码拆分实现资源按需加载。

三、浏览器渲染优化：解决页面卡顿、抖动、掉帧

网络加载完成后，页面滚动、动画、操作卡顿，视觉抖动，均为渲染层面问题。

浏览器渲染流水线：DOM构建→CSSOM构建→渲染树→布局(回流)→重绘→合成。
优化核心：减少回流、降低重绘、优先图层合成。

1. 回流与重绘核心优化

三者性能成本：回流 > 重绘 > 图层合成

回流（重排）：元素宽高、位置、布局发生变化，浏览器重新计算页面布局，性能开销最大。
重绘：元素颜色、透明度、样式变化，无布局改动，仅重新绘制像素，开销较低。
图层合成：仅独立图层内容变化，不触发布局和绘制，开销最低，可实现60fps流畅动画。
落地优化：动画优先使用 transform、opacity 属性，开启硬件加速，仅触发图层合成；批量修改DOM，先脱离文档流操作再渲染；避免读写DOM样式交替执行，防止强制同步布局。

2. CSS 渲染优化

使用 PurgeCSS 自动剔除页面未使用的冗余CSS代码，精简样式体积。
避免深层嵌套、通配符、冗余选择器，减少浏览器样式匹配耗时。
CSS前置、JS后置，防止JS阻塞CSS渲染，避免长时间白屏。

3. 解决布局偏移问题

所有图片、视频、媒体资源固定宽高占位，避免资源加载后撑开页面。
异步渲染的接口数据、弹窗、动态模块提前预留占位空间。
禁止无预期的弹窗、广告、模块动态弹出，避免页面突发偏移。

四、运行时优化

页面加载完成后，点击延迟、滚动卡顿、输入卡顿，都是主线程阻塞、代码执行效率低导致的运行时性能问题。

1. JS 执行优化，释放主线程

拆分超长同步任务，复杂计算、大数据遍历、文件解析等耗时操作，放入 Web Worker 异步执行，不占用主线程。
海量DOM渲染、大数据处理采用任务分片，通过 requestIdleCallback、定时器拆分任务，避免单次长时间阻塞主线程。
避免无效循环、重复计算、冗余逻辑，精简运行时代码。

2. 防抖与节流

针对 scroll、resize、input、mousemove 等高频触发事件，减少执行次数，极致优化交互流畅度。

防抖：多次触发只执行最后一次，适用于搜索输入、窗口大小调整。
节流：固定时间内只执行一次，适用于滚动加载、拖拽、高频点击。

3. 内存泄漏优化

SPA单页应用长期运行，内存泄漏会导致页面越用越卡、闪退，是日常优化重点。

组件销毁、页面卸载时，清空定时器、延时器、事件监听、接口订阅。
杜绝全局变量滥用，避免闭包无效常驻内存。
及时释放大数组、大对象、废弃DOM引用，避免内存堆积。

4. 框架专属优化（Vue/React）

React：使用 memo、useMemo、useCallback 规避无效重渲染，拆分组件粒度。
Vue：合理使用 v-once、v-memo，减少响应式冗余更新，避免频繁修改根级状态。
避免全局状态滥用，减少全局更新带来的全组件渲染开销。

五、工程构建优化

打包产物体积过大、冗余依赖过多，是首屏加载慢的核心根源，适配 Webpack、Vite 所有项目。

1. 基础工程优化

Tree Shaking：开启ES Module模式，自动剔除未使用的死代码、废弃模块。
代码分割：拆分业务代码、公共代码、第三方依赖，避免单文件打包体积过大。
生产环境开启代码压缩、去除冗余代码，极致精简产物。

2. 第三方依赖优化

替换重型库：moment替换为dayjs，完整lodash替换为lodash-es按需引入。
UI组件库按需引入，禁止全量导入，大幅减少包体积。
超大第三方依赖通过CDN引入，不打包进业务产物。

3. 问题排查

通过 webpack-bundle-analyzer 可视化打包产物，快速定位超大文件、冗余依赖，精准优化。

六、高阶优化：架构级性能升级

1. 渲染架构优化

SSG静态预渲染：静态页面提前打包渲染，访问无计算耗时，性能最优。
SSR服务端渲染：解决SPA首屏白屏、渲染慢、SEO差问题，提升首屏体验。
骨架屏、加载占位优化用户感知，弱化白屏、加载等待的负面体验。

2. 数据请求优化

高频静态接口数据本地缓存，减少重复请求。
合并重复请求、防抖请求，减少网络开销。
大数据列表采用虚拟列表、分页加载，解决海量DOM渲染卡顿问题。

七、性能监控与持续迭代

性能优化不是一次性工作，需要常态化监控、防止性能回归。

本地通过 Lighthouse、Performance 面板自测，模拟弱网、低配设备场景。
线上接入 RUM 真实用户监控，采集真实的 LCP、INP、CLS 指标数据。
CI/CD 流水线增加性能卡点，拦截性能退化的代码合并。
监控资源加载失败、接口超时、页面卡顿、内存异常等问题，及时迭代优化。

八、面试核心考点极简总结

1. 首屏加载慢排查思路

先看网络：排查请求多、体积大、无缓存、慢接口；再看渲染：排查主线程长任务、阻塞JS、频繁回流；最后看工程：排查打包冗余、依赖过大、代码未拆分。

2. 回流重绘核心考点

布局变更触发回流，样式变更触发重绘，图层合成开销最低；动画优先用transform/opacity，批量操作DOM，读写分离，规避强制同步布局。

3. 懒加载与预加载区别

懒加载：延迟加载非关键资源，减少首屏压力；预加载：提前加载即将使用的关键资源，提升后续操作速度。

九、总结

前端性能优化的本质，就是围绕加载快、渲染顺、交互稳、体积小、可监控五大核心展开，记住这套万能逻辑：

网络优化缩体积、强缓存；
渲染优化减回流、稳布局；
运行优化释主线、防泄漏；
工程优化拆代码、简依赖；
长期优化靠监控、防退化。