LazyLoading是延迟加载非首屏/非关键资源以提升首屏速度和体验，涵盖图片（Intersection Observer）、组件（import()）、第三方脚本（手动插入）及预加载策略，需权衡优先级、时机与兼容性。
LazyLoading（懒加载）在JavaScript中是指延迟加载非首屏或非关键资源，等用户真正需要时再加载，从而提升页面初始加载速度和用户体验。
图片懒加载：最常见场景
图片通常占页面体积大，但很多在首屏外。通过监听滚动事件或使用 Intersection Observer API 判断图片是否进入视口，再动态设置 src 属性。
- 传统方式用
scroll事件 +getBoundingClientRect()，但性能较差，需防抖 - 推荐用
IntersectionObserver，原生、轻量、自动处理节流 - HTML 中先用
data-src存真实地址，src设为占位图或空
组件/模块懒加载：配合现代框架
React、Vue 等支持动态导入（import()），实现路由级或条件渲染级的代码分割。
- React Router v6 中用
lazy+Suspense加载路由组件 - Vue 中用
defineAsyncComponent或路由配置的component: () => import('./xxx.vue') - 避免在循环或高频触发逻辑中直接调用
import()，防止重复请求
第三方脚本懒加载：控制时机与依赖
广告、统计、客服等脚本不影响核心功能，应延迟加载或按需触发。
- 用
async或defer属性控制加载时机，但无法保证执行顺序 - 更可控的方式是手动创建
<script></script>标签，在用户交互（如点击按钮）或特定状态后插入 DOM - 注意检查全局变量（如
window.gtag）是否存在，避免未加载就调用
资源预加载与智能预测
懒加载不等于“越晚越好”，合理预测用户行为可进一步优化体验。
-
link rel="preload"提前加载关键但未立即使用的资源（如即将切换的页面 JS） - 结合用户行为（如鼠标悬停导航项、长按按钮）触发预加载，提高响应速度
- 服务端可结合埋点数据，对高转化路径做资源优先级调整
懒加载不是简单加个 loading="lazy" 就完事，关键是识别资源优先级、选择合适触发时机、兼顾兼容性与降级方案。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
