什么是懒加载？如何实现？

**什么是懒加载？如何实现懒加载：提升网页性能的关键策略** 在追求卓越用户体验的今天，网页加载速度至关重要。懒加载作为一种优化策略，通过延迟加载非关键资源，显著提升网页的初始加载速度和用户体验，减少不必要的资源消耗。实现懒加载，推荐结合HTML的`loading="lazy"`属性和JavaScript的Intersection Observer API。前者适用于图片和iframe，实现高效原生懒加载；后者则能应对背景图、视频等复杂场景，异步监听元素进入视口的时机，动态加载资源。懒加载有效解决了传统全量加载带来的首屏渲染慢、带宽浪费等问题，显著提升FCP和LCP指标。但需注意其潜在缺点，如SEO影响、布局偏移、JavaScript依赖等，应根据实际情况合理应用懒加载策略，实现性能与体验的平衡。

懒加载的核心目的是提升网页初始加载速度和用户体验，减少不必要的资源消耗，其最推荐的实现方式是结合HTML的loading="lazy"属性和JavaScript的Intersection Observer API。对于图片和iframe，可直接使用原生loading="lazy"实现高效懒加载；对于背景图、视频、自定义组件等复杂场景，则应采用Intersection Observer API异步监听元素进入视口的时机，动态加载资源，避免主线程阻塞。懒加载解决了传统全量加载导致的首屏渲染慢、带宽浪费、服务器压力大等问题，显著提升FCP和LCP指标，优化移动端流量消耗与交互流畅度。除图片外，视频、SPA组件、长列表数据、非关键CSS/JS文件及背景图均可实施懒加载。但需注意其潜在缺点：可能影响SEO（需确保爬虫可抓取data-src内容或使用noscript备用方案）、引发布局偏移（CLS，需预设元素尺寸或使用aspect-ratio）、依赖JavaScript（原生方案可缓解）、误用于首屏内容导致加载延迟，以及老旧浏览器兼容性问题（需polyfill）。因此，应根据内容重要性、用户行为和浏览器支持情况合理应用懒加载策略，以实现性能与体验的平衡。

懒加载，说白了，就是一种延迟加载策略。它不是一股脑儿把所有内容都加载出来，而是等到用户真正需要看到某个元素时（比如滚动到屏幕可见区域），才去加载它。这就像你点外卖，店家不是把所有菜都提前做好，而是等你下单了才开始准备，这样既节省了资源，也保证了新鲜度。核心目的就是提升网页的初始加载速度和用户体验，减少不必要的资源消耗。

懒加载的实现，在我看来，最现代也最推荐的方式是利用浏览器原生的能力或者Intersection Observer API。

解决方案

实现懒加载，最直接且效率高的方案是结合HTML属性和JavaScript的Intersection Observer API。

1. 原生懒加载（针对图片和iframe）： 现代浏览器已经支持原生的loading属性。你只需要在或