17370845950

惰性加载是延迟加载资源至真正需要时才获取或执行，以提升首屏性能；包括图片用loading="lazy"或IntersectionObserver、脚本用import()、组件用React.lazy或defineAsyncComponent、数据用滚动触发等。

JavaScript 中的惰性加载（Lazy Loading）是指延迟加载资源，直到真正需要时才去获取或执行，从而提升页面初始加载性能和用户体验。

如何实现惰性加载

常见实现方式包括以下几类：

• 图片/媒体资源惰性加载：利用 loading="lazy" HTML 属性（原生支持，Chrome 76+），或通过 IntersectionObserver 监听元素是否进入视口，再动态设置 src 或 srcset。
• 脚本/模块惰性加载：使用 import() 动态导入语法加载 ES 模块，配合按钮点击、路由切换等时机触发；也可用 document.createElement('script') 手动插入并监听 onload。
• 组件/功能惰性加载：在框架中（如 React 的 React.lazy + Suspense，Vue 的 defineAsyncComponent）按需加载组件，避免首屏打包体积过大。
• 数据请求惰性加载：滚动到底部自动加载下一页（无限滚动），或标签页切换后再拉取对应数据，而非初始化时全部请求。

典型应用场景

惰性加载适用于资源量大、非首屏必需、或用户行为可预测的场景：

• 长列表与无限滚动：电商商品列表、社交信息流，只渲染可视区域及少量缓冲项，滚动时再加载新数据。
• Tab 栏或折叠面板：切换到某个 Tab 时才加载其内容（如图表、表格、富文本），避免预加载所有 tab 的 JS 和数据。
• 模态框（Modal）与弹窗：点击按钮才加载弹窗所需的模板、脚本或远程内容，减少空闲内存占用。
• 第三方 SDK 惰性注入：如统计脚本、客服组件、地图 SDK，等用户触发相关操作（如点击“联系客服”）再加载，避免阻塞主流程。
• 首屏优化中的非关键资源：背景视频、装饰性 SVG、字体子集、非核心插件，可延后加载以提升 LCP、FCP 等核心指标。

注意事项与建议

惰性加载不是万能的，需权衡体验与技术成本：

• 避免对用户明确预期会立即使用的资源做惰性处理（如首页主按钮后的表单组件），否则可能造成明显延迟感。
• 使用 IntersectionObserver 时添加合理阈值（rootMargin），让资源提前一点加载，防止滚动过快时出现空白。
• 动态 import() 需配合打包工具（如 Webpack、Vite）代码分割能力，确保生成独立 chunk 文件。
• 服务端渲染（SSR）应用中，注意惰性组件在服务端不执行，需合理处理骨架屏或 fallback UI。

不复杂但容易忽略。关键是判断“什么时候算真正需要”，再选对机制去响应它。