前端性能优化全指南：从首屏加载到运行时流畅度

前端性能直接影响用户体验与转化率。本文系统梳理从首屏加载到运行时流畅度的全链路优化方法论。

资源加载优化

关键路径资源优先加载，非关键资源延迟加载。合理使用 preload、prefetch，对图片采用懒加载与现代格式（WebP/AVIF）。

渲染性能

避免布局抖动与强制同步布局，利用 will-change 与 transform 实现合成层动画。长列表采用虚拟滚动，减少 DOM 节点数量。

缓存与分发

构建合理的缓存层级：HTTP 缓存、Service Worker 缓存、CDN 分发。对 API 数据采用 stale-while-revalidate 策略平衡时效与性能。