惰性加载是延迟加载资源至真正需要时才获取或执行，以提升首屏性能；包括图片用loading="lazy"或IntersectionObserver、脚本用import()、组件用React.lazy或defineAsyncComponent、数据用滚动触发等。
ent、数据用滚动触发等。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。
不复杂但容易忽略。关键是判断“什么时候算真正需要”，再选对机制去响应它。
