先说图片懒加载这个老生常谈却超级实用的技巧。我们平台上商品图多到爆炸，一页至少二三十张高清大图，用户一进来就得全加载，不卡才怪。后来我们用了Intersection Observer API来实现懒加载，图片只有滚动到视口范围内才加载初始的。代码实现起来也不复杂：先给图片标签设个data-src属性存真实URL，src放个占位图，然后用JS监听元素是否进入视口，一旦触发就把data-src的值赋给src。为了省事，我们直接用了现成的lozad.js库，几行代码就搞定了。测试下来，首屏加载时间从3秒多降到了1秒以内，而且流量消耗也少了，用户滑动时体验丝滑多了。不过得注意，懒加载别滥用，关键图片比如Logo还是得优先加载，否则可能影响SEO评分。
另一个案例是代码分割和路由懒加载。我们项目用Vue.js开发，一开始把所有组件打包到一个bundle里，首屏加载时就得把整个应用的JS都下载完，实在太浪费。后来用Webpack的动态import功能配合Vue Router，把不同路由对应的组件拆成独立chunk。比如用户点"个人中心"时才加载对应模块，这样首屏只需要核心代码。具体实现就是在路由配置里把component设成() => import('./User.vue')，Webpack会自动生成单独文件。优化后，首屏资源体积从2MB减到了800KB左右，FCP（首次内容绘制）时间提升了40%。但要注意，拆得太碎可能增加HTTP请求数，我们后来用了Preload插件预加载关键路由，平衡了性能和体验。
第三个优化点是缓存策略的调整。我们发现用户重复访问时，静态资源如CSS、JS老是重新下载，浪费带宽。于是我们在Nginx配置里加了强缓存和协商缓存：对不常变的文件设Cache-Control: max-age=31536000，配上内容哈希命名，这样用户下次访问就直接用本地缓存。同时用Etag做协商缓存，确保更新时能及时失效。为了更进一步，我们还给部分页面接了Service Worker，把常用资源存到Cache API里，离线时也能勉强展示内容。上线后，二次访问的加载速度提升了60%，服务器压力也小了不少。不过缓存策略得根据业务来定，比如订单页这种动态内容就不能乱缓存，否则数据可能过时。
最后提一个容易被忽略的细节：减少重绘和重排。我们项目里有个商品筛选组件，一开始用JS频繁操作DOM样式，导致页面卡顿。后来用Chrome Performance一录屏，发现每次筛选都会触发几十次重排。于是我们改用了CSS3的transform和opacity来做动画，因为这些属性不会引起布局重计算。另外，把多次DOM操作合并成一次，比如用DocumentFragment批量插入节点，或者用requestAnimationFrame来调度更新。优化后，页面交互流畅多了，FPS（帧率）从40升到了稳定的60。其实这种优化不需要大动干戈，但收益很明显，特别适合表单、列表这种高频交互场景。
总之，前端性能优化不是一蹴而就的，得结合具体业务一点点抠细节。从图片、代码到缓存和渲染，每个环节都可能藏着你没注意到的瓶颈。关键是多用工具分析，比如Lighthouse测个分、Webpack Bundle Analyzer看看打包结果，再针对性地动手。我们的项目经过这轮优化，不仅用户体验上去了，连搜索排名都跟着涨了。如果你也在折腾性能，不妨从这些小案例开始试水，说不定有意外惊喜！