根据 Google 研究，网站加载时间每增加 1 秒，转化率会下降 7%；而加载速度小于 2 秒的网站，用户留存率是慢速网站的 3 倍。性能优化并非单纯的 “技术调优”，而是直接影响业务转化的核心环节。本文将从 “资源加载”“代码优化”“缓存策略” 三个维度，提供可量化的优化方案。​
一、资源加载优化：减少请求与体积​
图片优化：压缩与格式选择​
压缩工具：使用 TinyPNG（有损压缩）或 Squoosh（Google 开源工具）压缩图片，平均可减少 50% 以上体积，且肉眼几乎无差异。​
格式选择：优先使用 WebP 格式（比 JPG 小 25%-35%，支持透明），对动画图使用 AVIF（比 GIF 小 50%），并为不支持的浏览器提供降级方案：​
​
<picture>​
<source srcset="image.avif" type="image/avif">​
<source srcset="image.webp" type="image/webp">​
<img src="image.jpg" alt="优化图片">​
</picture>​
​
CSS 与 JS 优化：合并、压缩与延迟加载​
​
<script src="analytics.js" defer></script> <!-- 统计脚本，不影响首屏 -->​
<script src="main.js" async></script> <!-- 独立功能脚本，无需顺序 -->​
​
合并压缩：使用 Webpack、Vite 等构建工具将多个 CSS/JS 文件合并为单个文件，并开启压缩（如 Terser 压缩 JS，CSSNano 压缩 CSS），减少 HTTP 请求次数。​
延迟加载：对非首屏 JS 使用defer或async属性，避免阻塞 DOM 解析：​
defer：脚本按顺序加载，DOM 解析完成后执行；​
async：脚本加载完成后立即执行，不保证顺序。​
示例：​
使用 CDN 加速静态资源​
CDN（内容分发网络）通过全球节点缓存静态资源（图片、CSS、JS），用户可从最近的节点获取资源，延迟可降低 50% 以上。选择 CDN 时需关注 “节点覆盖范围”“HTTPS 支持” 和 “实时监控功能”，国内推荐阿里云 CDN，国际推荐 Cloudflare。​
二、代码层面的性能优化​
CSS 选择器优化：CSS 选择器从右向左解析，复杂选择器会增加解析时间。例如避免使用div#header .nav li a，改为给链接添加类名.nav-link，直接通过类名选择。​
JS 执行效率优化：避免在循环中操作 DOM（每次操作都会触发重排重绘），可先创建文档片段（DocumentFragment），批量操作后再插入 DOM：​
​
const fragment = document.createDocumentFragment();​
for (let i = 0; i < 100; i++) {​
const li = document.createElement(''li'');​
li.textContent = `Item ${i}`;​
fragment.appendChild(li);​
}​
document.querySelector(''ul'').appendChild(fragment);​
​
首屏加载优先级：通过<link rel="preload">预加载首屏关键资源（如核心 CSS、首屏图片），例如：​
​
<link rel="preload" href="critical.css" as="style">​
<link rel="preload" href="hero-image.webp" as="image" imagesrcset="hero-image-480w.webp 480w, hero-image-800w.webp 800w" imagesizes="100vw">​
​
三、缓存策略：减少重复加载​
HTTP 缓存：通过设置响应头控制缓存，常用组合：​
Cache-Control: public, max-age=31536000：静态资源（如图片、JS）设置 1 年缓存；​
Cache-Control: no-cache：动态内容（如 HTML）每次验证是否更新；​
ETag或Last-Modified：配合no-cache使用，验证资源是否变化，不变则返回 304 状态码。​
Service Worker 缓存：对于 PWA（渐进式 Web 应用），可通过 Service Worker 拦截请求，实现离线缓存。核心流程：​
注册 Service Worker；​
安装时缓存核心资源；​
激活时清理旧缓存；​
拦截请求，优先从缓存获取资源。