前端性能优化一、加载优化：减少资源体积，加速首屏渲染首屏加载时间（FCP）是用户对页面性能的第一感知，核心目标是

首屏加载时间（FCP）是用户对页面性能的第一感知，核心目标是减少关键资源体积、缩短关键路径耗时。

图片优化：
- 使用现代图片格式（WebP/AVIF）替代 PNG/JPEG（同等质量下体积更小）；
- 响应式图片（srcset + sizes）：根据设备屏幕尺寸加载合适分辨率的图片；
- 懒加载（Lazy Load）：仅当图片进入视口时加载（原生 loading="lazy" 或 Intersection Observer）；
- 压缩工具：使用 ImageOptim、Squoosh 或构建工具（如 image-webpack-loader）压缩图片。
JS/CSS 压缩：
- 构建工具（Webpack/Rollup）开启 TerserPlugin（JS 压缩）、CssMinimizerPlugin（CSS 压缩）；
- 移除冗余代码：通过 ESLint/Prettier 规范代码，或使用 tree-shaking（ES Module 静态分析）剔除未使用的代码。
字体优化：
- 仅加载必要字重/字集（如中文常用字约 2 万，可按需子集化）；
- 使用 WOFF2 格式（比 TTF 小 30%），并通过 font-display: swap 避免文本闪烁。

预加载（Preload）：对首屏关键资源（如核心 CSS、JS）使用 <link rel="preload"> 提示浏览器优先加载：
```
ini 体验AI代码助手 代码解读复制代码<link rel="preload" href="critical.css" as="style">
```
预渲染（Prerender）：对可能跳转的页面提前渲染（如 <link rel="prerender" href="https://example.com/page">），但需谨慎使用（可能浪费带宽）。
服务端渲染（SSR）/静态生成（SSG）：将首屏 HTML 直接返回，避免客户端 JS 渲染等待（如 Next.js、Nuxt.js）。

合并资源：将多个小 CSS/JS 文件合并为一个（需权衡缓存策略）；
雪碧图（CSS Sprite）：将小图标合并为一张大图，通过 background-position 定位（现代场景可用 SVG Sprite 替代）；
内联关键 CSS：将首屏必需的 CSS 直接嵌入 HTML <style> 标签（避免外部 CSS 阻塞渲染）；
使用 CDN：静态资源（图片、JS、CSS）部署到 CDN 节点，利用边缘节点就近访问。

作者：lpp19
链接：juejin.cn/post/752163…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

前端性能优化