懒加载(Lazy Loading)是提升首屏性能和降低带宽消耗的重要手段。本文聚焦图片、媒体、组件和脚本的工程实现与最佳实践。
图片与媒体懒加载
- 使用
loading="lazy"或IntersectionObserver延迟加载可视区域外的图片与 iframe。 - 对首屏图片使用占位(LQIP)或渐进式加载以减少 CLS。
脚本与模块懒加载
- 动态 import 非关键脚本,并在用户触发相关场景时才加载。
- 为重要异步模块提供加载占位与错误回退处理。
优先级与调度
- 对资源设定优先级(preload for critical,lazy for non-critical),使用 Resource Timing 分析加载顺序与瓶颈。
相关链接: