1.骨架屏技术
- 在内容加载前显示页面结构框架
- 使用css动画提供加载指示
- 平滑过渡到实际内容
2.资源加载优化
- 关键css内联：消除渲染阻塞
- 资源预加载：提前加载关键资源
- 异步加载非关键资源：使用media="print" onload技巧
- DNS预解析：减少DNS查询时间
3.代码优化
- 代码分割：按需加载不同模块
- 组件懒加载：使用React Suspense或Vue异步组件
- Tree Shaking：移除未使用代码
- 资源压缩：Gzip压缩
4.渲染优化
- 服务端渲染（SSR）：首屏直出HTML
- 静态站点生成（SSG）：预渲染静态页面
- 渐进式渲染：优先渲染核心内容
5.性能监控
- 测量FCP（First Contentful Paint）
- 跟踪LCP（Largest Contentful Paint）
- 监控CLS（Cumulative Layout Shift）
6.缓存策略
- HTTP缓存：强缓存与协商缓存
- Service Worker：离线缓存资源
- CDN缓存：边缘节点缓存静态资源
