前端性能优化笔记
一、资源加载优化（核心：提升首屏加载速度）
1. 减少资源体积
-
图片优化
- 使用现代格式：WebP/AVIF（比 JPEG/PNG 小 30%-50%），通过
<picture>标签降级兼容 - 压缩处理：TinyPNG、Squoosh 等工具压缩，按场景选择分辨率
- 图标替代：简单图标用 SVG，复杂图标用字体图标（Font Awesome）
- 使用现代格式：WebP/AVIF（比 JPEG/PNG 小 30%-50%），通过
-
JS/CSS 压缩与精简
- 开启压缩：webpack 的 TerserPlugin（JS）、CssMinimizerPlugin（CSS）
- 剔除无效代码：Tree-shaking（移除未引用代码）、Dead Code Elimination
- 精简第三方库：按需导入（如 lodash-es）、使用轻量替代库（dayjs 替代 moment.js）
-
HTML 优化
- 移除空标签、注释，用 html-minifier 压缩
2. 优化加载方式
-
资源按需加载
- 图片 / 视频懒加载：
loading="lazy"属性或 IntersectionObserver API - JS 动态导入：
import()分割代码，路由级组件懒加载（React.lazy + Suspense）
- 图片 / 视频懒加载：
-
控制加载优先级
-
关键资源内联：首屏必要 CSS 内联到
<head>，首屏 JS 放<body>底部 -
非关键资源异步加载：
async（加载完立即执行）、defer（DOM 解析完执行） -
资源预加载提示
<link rel="preload">：提前加载关键资源（字体、首屏图片）<link rel="preconnect">：提前建立第三方域名连接（CDN、API 服务器）<link rel="prefetch">：预加载下一屏可能用到的资源
-
3. 减少请求次数
-
资源合并
- 小图片合并为雪碧图（Sprite），减少 HTTP 请求（避免过度合并）
- 合理合并 JS/CSS（平衡请求数与缓存失效频率）
-
升级 HTTP 版本
- 使用 HTTP/2/3，利用多路复用、头部压缩特性减少连接开销
二、渲染性能优化（核心：提升交互流畅度）
1. 减少重排（Reflow）和重绘（Repaint）
-
CSS 层面
- 避免触发重排的属性（width、height、margin 等），优先用 transform、opacity
- 批量修改样式：用 classList 一次性切换类，而非逐个修改样式
- 脱离文档流：动画元素用
position: fixed/absolute或will-change: transform
-
DOM 操作层面
- 批量操作：先移除元素（display: none），修改后再插入；或用 DocumentFragment
- 缓存查询：
const el = document.querySelector('#id')代替多次查询
2. 优化渲染阻塞
- 简化 DOM 结构：避免嵌套过深，减少不必要的节点（降低渲染计算量）
- 避免同步 JS 阻塞：长任务（>50ms）拆分为微任务（Promise）或用 Web Worker 处理
3. 动画与滚动优化
- 用
requestAnimationFrame替代setTimeout/setInterval（与浏览器刷新同步） - 滚动监听加
passive: true：window.addEventListener('scroll', fn, { passive: true }) - 大量数据列表用虚拟列表：react-window、vue-virtual-scroller（只渲染视口内项）
三、缓存策略（核心：复用资源，减少重复加载）
1. HTTP 缓存
- 强缓存：
Cache-Control: max-age=31536000（静态资源设长缓存）+ 内容哈希（如 app.abc123.js） - 协商缓存：资源过期后，用
If-Modified-Since/If-None-Match验证，未变则返回 304
2. 本地存储缓存
localStorage：缓存不常变的小数据（用户配置、字典）IndexedDB：存储大数据（异步操作，容量大，不阻塞主线程）
3. Service Worker 缓存
- 离线缓存关键资源（HTML、CSS、核心 JS），支持离线访问（PWA 核心特性）
四、代码效率优化
1. 减少不必要的计算
- 缓存计算结果：React.useMemo、Vue.computed（依赖不变时复用）
- 优化循环：减少循环内复杂操作，将不变计算移到循环外
2. 事件与内存管理
- 事件委托：父元素代理子元素事件（如 ul 代理 li 的点击）
- 清理副作用：组件卸载时移除事件监听、清除定时器（避免内存泄漏）
3. 框架层面优化
- React：React.memo（避免无关重渲染）、useCallback（缓存函数）、useMemo（缓存计算值）
- Vue：v-memo（缓存组件）、v-once（静态内容）、keep-alive（缓存路由组件）
五、网络与服务端优化
-
使用 CDN：静态资源部署到 CDN，利用边缘节点加速（减少物理距离延迟）
-
接口优化
- 合并接口、分页加载（减少请求次数和数据量）
- HTTP 压缩：gzip/brotli（JS/CSS/HTML 可压缩 50%+）
-
服务端渲染（SSR）/ 静态站点生成（SSG） ：Next.js、Nuxt.js（提升首屏速度和 SEO）
六、性能监控与分析
-
核心指标：Web Vitals（LCP：最大内容绘制、FID：首次输入延迟、CLS：累积布局偏移）
-
工具
- Lighthouse（Chrome 插件）：全面分析性能、SEO、可访问性
- Chrome DevTools：Network（资源加载）、Performance（渲染过程、长任务）
总结
核心原则：减少体积、加快加载、优化渲染、复用缓存
实践步骤：结合业务场景 → 用工具定位瓶颈 → 针对性优化（避免过度优化）
