前端优化性能的方法

首屏加载超过3秒，前端用户流失率直接翻倍。优化这不是前端恐吓，是优化Google用真实流量测出来的数字。去年我接手一个电商详情页，前端LCP（最大内容绘制）4.2秒，优化跳出率68%。前端把首屏图片从PNG换成AVIF、优化加上fetchpriority="high"、前端干掉两个阻塞渲染的优化第三方脚本之后，LCP降到1.8秒，前端跳出率掉了将近一半。优化性能优化不是前端玄学，是优化能直接换算成钱的工程。

先盯资源加载。前端浏览器解析HTML时遇到<script>会停下来，等下载和执行完才继续。把非关键JS加上defer，或者干脆用动态import()拆包，首屏能省出几百毫秒。CSS也一样，首屏用不到的样式抽成独立文件，用media="print"加onload切换，或者直接内联关键CSS。我见过一个后台系统，光是把Ant Design的完整样式表换成按需引入，首屏CSS体积从280KB掉到40KB，渲染时间少了600毫秒。

图片是另一个重灾区。很多人还在用JPG和PNG，其实AVIF和WebP的压缩率能再高30%到50%。<img>标签加上loading="lazy"让视口外的图片延迟加载，但首屏那张大图千万别懒加载，反而要加fetchpriority="high"告诉浏览器优先处理。尺寸也要卡死，用srcset给不同屏幕密度提供不同分辨率，别让手机下载一张2000px宽的桌面图。有次我抓包发现一个移动端页面加载了1.2MB的轮播图，实际显示区域只有375px宽，纯属浪费。

网络层能做的事不少。HTTP/2的多路复用已经普及，但很多站点还在用雪碧图合并小图标，反而拖慢并行加载。字体文件用font-display: swap避免文字闪烁，或者干脆用系统字体栈。preconnect和dns-prefetch提前建立第三方域名的连接，尤其是支付、地图、统计这些外部服务。我习惯在<head>里加几行：<link rel="preconnect" href="https://cdn.example.com">，简单但有效。

运行时性能别忽略。长列表用虚拟滚动，别一次性渲染几千个DOM节点。事件监听器记得用passive: true，尤其是touchstart和wheel，否则滚动时浏览器要等你回调执行完才动。React项目里，useMemo和useCallback别滥用，但列表项和复杂计算该包就包。Vue的v-once和v-memo在静态内容上能省掉diff开销。有个细节：requestAnimationFrame里别做重计算，拆成小任务用setTimeout或scheduler.postTask分片。

缓存策略要分层。HTML走协商缓存，JS/CSS带hash走强缓存一年。Service Worker能拦截请求做离线缓存，但别把首屏也塞进去，首次访问反而多一层开销。CDN边缘节点缓存静态资源，动态接口用stale-while-revalidate让用户先看到旧数据再后台更新。我见过一个新闻站，把文章列表接口的Cache-Control设成max-age=60，QPS直接降了四成。

监控不能少。Lighthouse跑分只是参考，真实用户监控（RUM）才靠谱。用PerformanceObserver监听LCP、FID、CLS，上报到自己的日志系统。有次线上CLS突然飙到0.3，查出来是广告位异步插入把内容顶下去了，给容器加个min-height就解决了。性能优化没有终点，但每次改动都能在监控面板上看到曲线变化，那种反馈很实在。