JavaScript中LazyLoading实现资源按需加载优化

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()，防止重复请求第三方脚本懒加载：控制时机与依赖广告、统计、客服等脚本不影响核心功能，应延迟加载或按需触发。 RedClaw 百度推出的手机端万能AI Agent助手