前端性能优化10个实用技巧

1图片资源深度优化

优先使用WebP/AVIF格式（比JPEG小30%+），配合标签兼容旧浏览器：

为非首屏图片添加loading="lazy"属性实现懒加载，减少初始请求
用srcset+sizes实现响应式图片，避免"大图片在小屏幕上显示"的浪费

2CSS加载与执行优化

将首屏关键CSS内联到<head>中，非关键CSS用media="print"延迟加载：

删除未使用的CSS代码（可借助PurgeCSS工具），避免选择器嵌套过深（如避免"div > ul > li > a"）
避免使用@import引入CSS（会阻塞并行加载）

3JavaScript加载策略

非必要JS用async/defer属性异步加载，避免阻塞DOM解析：

<script src="script1.js" async></script>

<script src="script2.js" defer></script>

对大型JS文件进行代码分割（如Webpack的splitChunks），按需加载路由组件
延迟加载非首屏交互JS（如广告、评论区），可在页面空闲时用requestIdleCallback加载

4强缓存与协商缓存配置

对静态资源（图片、JS、CSS）设置长期强缓存：

Cache-Control: max-age=31536000, immutable // 1年有效期，不发起验证请求

资源更新时通过文件名哈希（如app.8f3d.js）避免缓存失效问题
对频繁变化的资源（如API数据）使用协商缓存（ETag/Last-Modified）

5减少重绘与重排

批量操作DOM：先将元素脱离文档流（如隐藏display:none），修改完成后再显示
避免频繁读取offsetHeight、scrollTop等"布局属性"，可集中读取后批量修改：

// 优化前：触发多次重排 element.style.width = '100px'; let height = element.offsetHeight; // 触发重排 element.style.height = height + 'px'; // 再次触发重排 // 优化后：只触发1次重排 let height = element.offsetHeight; // 先读取 element.style.cssText = 'width: 100px; height: ' + height + 'px'; // 批量修改

使用transform和opacity修改动画（仅触发合成层，不触发重排重绘）

6资源压缩与合并

通过Webpack/Vite等工具合并JS/CSS文件，减少HTTP请求数
开启服务器的Gzip/Brotli压缩（Brotli比Gzip压缩率高15-20%）
压缩字体文件，只保留网站使用的字符（如用Font Squirrel工具精简）

注意：合并文件不宜过大（建议单个JS/CSS不超过300KB），否则会影响缓存复用率

7预加载关键资源

用<link rel="preload">提前加载首屏必需资源（如字体、关键图片）：

对即将访问的页面资源，用<link rel="prefetch">预加载（如用户可能点击的下一页）
预连接第三方域名：<link rel="preconnect" href="https://api.example.com">

8首屏加载体验优化

使用骨架屏替代白屏（可通过CSS绘制简单骨架，或用SVG）
优先加载可视区内容，非首屏内容通过滚动触发加载
减少HTML文件体积（删除冗余空格、注释，压缩inline JS/CSS）

核心指标：LCP（最大内容绘制）应控制在2.5秒内，FID（首次输入延迟）<100毫秒

9使用CDN与HTTP/2

静态资源（JS、CSS、图片）部署到CDN，利用边缘节点加速访问（尤其跨地域用户）
升级到HTTP/2（支持多路复用，解决HTTP/1.1的队头阻塞问题）
合理设置CDN缓存规则，避免源站频繁回源

10性能监控与持续优化

用Lighthouse工具定期检测性能得分，关注Core Web Vitals核心指标
通过Performance API监控真实用户性能数据（RUM）：

// 监控首屏加载时间 const loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart; console.log('首屏加载时间：' + loadTime + 'ms');

建立性能预算（如JS总大小<300KB），在构建流程中设置超标告警