KNOWLEDGE / NOTE
懒加载
MDN · 站内原创整理
图片和 iframe 可以延迟到接近视口时再加载,减少首屏网络与解码压力。
核心说明
懒加载把非首屏资源推迟到接近需要时再加载。它可以减少首屏网络请求,但首屏主视觉和接近视口的内容不应该被过度延迟。
关键点
- 图片可以使用 loading=lazy,首屏关键图片通常应该保留优先级。
- 为图片提供宽高或纵横比,避免加载完成后页面发生布局跳动。
- 懒加载效果需要结合 Network 和 Performance 面板验证。
资料来源 在官方文档中核验:MDN ↗