JavaScript 中的延迟加载（Lazy Loading）与性能优化策略<\/strong><\/p>

延迟加载是一种性能优化策略，核心思想是将资源的加载推迟到真正需要时才执行。在 JavaScript 中，延迟加载常用于图片、脚本、模块等资源，可以有效减少初始页面负载时间，提升用户体验。下面我将循序渐进地讲解其概念、实现方案和底层原理。<\/p>

一、延迟加载的核心概念<\/h3>

为什么要延迟加载？<\/strong><\/p>

减少初始负载<\/strong>：页面首次加载时，只加载关键资源（Critical Resources），非关键资源（如首屏以下的图片、非核心功能脚本）延后加载。<\/li>
节省带宽与内存<\/strong>：避免加载用户可能永远不会看到的资源。<\/li>
提升交互就绪时间（Time to Interactive）<\/strong>：让主线程更快地完成初始渲染，更快响应用户操作。<\/li> <\/ul> <\/li>

适用场景<\/strong><\/p>

图片和视频（尤其是长页面中的媒体）。<\/li>
非核心的 JavaScript 模块（如弹窗、复杂图表库）。<\/li>
第三方脚本（如分析工具、广告代码）。<\/li> <\/ul> <\/li> <\/ol>
二、图片延迟加载的实现<\/h3>
图片是最常见的延迟加载对象。现代浏览器已原生支持通过 loading="lazy"<\/code> 属性实现，但了解其底层原理有助于处理复杂场景。<\/p>
方案1：原生 loading="lazy"<\/code> 属性<\/h4> <img<\/span> src<\/span>=<\/span>"placeholder.jpg"<\/span> data-src<\/span>=<\/span>"real-image.jpg"<\/span> loading<\/span>=<\/span>"lazy"<\/span> alt<\/span>=<\/span>"示例"<\/span>> <\/span><\/span><\/code><\/pre> 原理<\/strong>：浏览器自动监控图片与视口（Viewport）的距离，当图片即将进入视口时加载 src<\/code>。<\/li> 注意<\/strong>：loading<\/code> 属性还支持 "eager"<\/code>（立即加载）和 "auto"<\/code>（浏览器决定）。需注意浏览器兼容性（现代浏览器普遍支持）。<\/li> <\/ul> 方案2：Intersection Observer API（自定义懒加载）<\/h4> 当需要更精细控制或兼容旧浏览器时，可使用此 API。步骤<\/strong>：<\/p> HTML 结构<\/strong>：将真实图片 URL 放在 data-src<\/code>，src<\/code> 使用占位符或空。 <img<\/span> class<\/span>=<\/span>"lazy"<\/span> src<\/span>=<\/span>"placeholder.jpg"<\/span> data-src<\/span>=<\/span>"real-image.jpg"<\/span> alt<\/span>=<\/span>"示例"<\/span>> <\/span><\/span><\/code><\/pre><\/li> JavaScript 监听<\/strong>： const<\/span> lazyImages<\/span> =<\/span> document.querySelectorAll<\/span>('img.lazy'<\/span>); <\/span><\/span> <\/span><\/span>const<\/span> observer<\/span> =<\/span> new<\/span> IntersectionObserver<\/span>((entries<\/span>, observer<\/span>) => { <\/span><\/span> entries<\/span>.forEach<\/span>(entry<\/span> => { <\/span><\/span> if<\/span> (entry<\/span>.isIntersecting<\/span>) { \/\/ 图片进入视口 <\/span><\/span><\/span><\/span> const<\/span> img<\/span> =<\/span> entry<\/span>.target<\/span>; <\/span><\/span> img<\/span>.src<\/span> =<\/span> img<\/span>.dataset<\/span>.src<\/span>; \/\/ 替换为真实 URL <\/span><\/span><\/span><\/span> img<\/span>.classList<\/span>.remove<\/span>('lazy'<\/span>); <\/span><\/span> observer<\/span>.unobserve<\/span>(img<\/span>); \/\/ 停止监听该图片 <\/span><\/span><\/span><\/span> } <\/span><\/span> }); <\/span><\/span>}, { <\/span><\/span> rootMargin<\/span>:<\/span> '50px 0px'<\/span>, \/\/ 提前 50px 开始加载 <\/span><\/span><\/span><\/span> threshold<\/span>:<\/span> 0.1<\/span> \/\/ 当 10% 的图片可见时触发 <\/span><\/span><\/span><\/span>}); <\/span><\/span> <\/span><\/span>lazyImages<\/span>.forEach<\/span>(img<\/span> => observer<\/span>.observe<\/span>(img<\/span>)); <\/span><\/span><\/code><\/pre> 原理<\/strong>：IntersectionObserver<\/code> 异步监测目标元素与视口或指定容器的交叉状态，性能远优于传统 scroll<\/code> 事件监听（避免了频繁的主线程调用）。<\/li> <\/ul> <\/li> <\/ol> 方案3：传统滚动事件 + 节流<\/h4> 在极旧浏览器中作为降级方案（不推荐用于生产）。<\/p> function<\/span> lazyLoadImages<\/span>() { <\/span><\/span> const<\/span> lazyImages<\/span> =<\/span> document.querySelectorAll<\/span>('img.lazy'<\/span>); <\/span><\/span> lazyImages<\/span>.forEach<\/span>(img<\/span> => { <\/span><\/span> const<\/span> rect<\/span> =<\/span> img<\/span>.getBoundingClientRect<\/span>(); <\/span><\/span> if<\/span> (rect<\/span>.top<\/span> <<\/span> window.innerHeight<\/span> &&<\/span> rect<\/span>.bottom<\/span> >=<\/span> 0<\/span>) { <\/span><\/span> img<\/span>.src<\/span> =<\/span> img<\/span>.dataset<\/span>.src<\/span>; <\/span><\/span> img<\/span>.classList<\/span>.remove<\/span>('lazy'<\/span>); <\/span><\/span> } <\/span><\/span> }); <\/span><\/span>} <\/span><\/span>\/\/ 使用节流函数包装，避免性能问题 <\/span><\/span><\/span><\/span>window.addEventListener<\/span>('scroll'<\/span>, throttle<\/span>(lazyLoadImages<\/span>, 200<\/span>)); <\/span><\/span>window.addEventListener<\/span>('resize'<\/span>, throttle<\/span>(lazyLoadImages<\/span>, 200<\/span>)); <\/span><\/span><\/code><\/pre>三、 JavaScript 模块的延迟加载<\/h3> 对于非核心功能代码，可采用动态导入（Dynamic Import）实现按需加载。<\/p> 方案1：动态 import()<\/code> 语法<\/h4> \/\/ 点击按钮时才加载模块 <\/span><\/span><\/span><\/span>button<\/span>.addEventListener<\/span>('click'<\/span>, async<\/span> () => { <\/span><\/span> const<\/span> module<\/span> =<\/span> await<\/span> import<\/span>('.\/heavyModule.js'<\/span>); <\/span><\/span> module<\/span>.doSomething<\/span>(); \/\/ 使用模块功能 <\/span><\/span><\/span><\/span>}); <\/span><\/span><\/code><\/pre> 原理<\/strong>：import()<\/code> 返回 Promise，在需要时发起网络请求获取模块，并执行模块代码。<\/li> 注意<\/strong>：动态导入的模块会被 Webpack 等打包工具自动代码分割（Code Splitting），生成独立 chunk。<\/li> <\/ul> 方案2：基于路由的延迟加载（React\/Vue 示例）<\/h4> 在单页应用（SPA）中，结合路由实现页面级懒加载。<\/p> \/\/ React with React.lazy <\/span><\/span><\/span><\/span>const<\/span> Home<\/span> =<\/span> React<\/span>.lazy<\/span>(() => import<\/span>('.\/Home'<\/span>)); <\/span><\/span>const<\/span> About<\/span> =<\/span> React<\/span>.lazy<\/span>(() => import<\/span>('.\/About'<\/span>)); <\/span><\/span> <\/span><\/span>function<\/span> App<\/span>() { <\/span><\/span> return<\/span> ( <\/span><\/span> <<\/span>Suspense<\/span> fallback<\/span>=<\/span>{<<\/span>div<\/span>><\/span>Loading<\/span>...<<\/span>\/div>}><\/span> <\/span><\/span> <<\/span>Route<\/span> path<\/span>=<\/span>"\/home"<\/span> component<\/span>=<\/span>{Home<\/span>} \/><\/span> <\/span><\/span> <<\/span>Route<\/span> path<\/span>=<\/span>"\/about"<\/span> component<\/span>=<\/span>{About<\/span>} \/><\/span> <\/span><\/span> <<\/span>\/Suspense><\/span> <\/span><\/span> ); <\/span><\/span>} <\/span><\/span><\/code><\/pre> 原理<\/strong>：React.lazy<\/code> 内部使用动态导入，在路由匹配时加载对应组件。Suspense<\/code> 提供加载中状态。<\/li> <\/ul> 四、第三方脚本的延迟加载<\/h3> 对于非关键第三方脚本（如分析、广告），可通过动态创建 <script><\/code> 标签延迟加载。<\/p> function<\/span> loadThirdPartyScript<\/span>() { <\/span><\/span> const<\/span> script<\/span> =<\/span> document.createElement<\/span>('script'<\/span>); <\/span><\/span> script<\/span>.src<\/span> =<\/span> 'https:\/\/third-party.com\/analytics.js'<\/span>; <\/span><\/span> script<\/span>.async<\/span> =<\/span> true<\/span>; \/\/ 确保异步加载，不阻塞渲染 <\/span><\/span><\/span><\/span> document.body<\/span>.appendChild<\/span>(script<\/span>); <\/span><\/span>} <\/span><\/span>\/\/ 在页面核心内容加载完成后触发 <\/span><\/span><\/span><\/span>window.addEventListener<\/span>('load'<\/span>, loadThirdPartyScript<\/span>); <\/span><\/span>\/\/ 或在用户交互时触发 <\/span><\/span><\/span><\/span>button<\/span>.addEventListener<\/span>('click'<\/span>, loadThirdPartyScript<\/span>); <\/span><\/span><\/code><\/pre>五、延迟加载的进阶优化策略<\/h3> 预加载提示<\/strong>：使用 <link rel="preload"><\/code> 或 <link rel="prefetch"><\/code> 对即将需要的资源进行提示，平衡延迟加载与用户体验。 preload<\/code>：当前页面肯定需要的资源，高优先级加载。<\/li> prefetch<\/code>：未来页面可能需要的资源，空闲时加载。<\/li> <\/ul> <\/li> 渐进加载与模糊占位<\/strong>：图片可先加载极小尺寸或模糊版本，再过渡到高清图（如 Medium 风格）。<\/li> 错误处理与重试<\/strong>：懒加载资源可能因网络失败，需添加 onerror<\/code> 重试机制。 img<\/span>.onerror<\/span> =<\/span> function<\/span>() { <\/span><\/span> this<\/span>.src<\/span> =<\/span> 'fallback.jpg'<\/span>; \/\/ 提供降级图片 <\/span><\/span><\/span><\/span>}; <\/span><\/span><\/code><\/pre><\/li> <\/ol> 六、注意事项与最佳实践<\/h3> SEO 友好<\/strong>：确保搜索引擎能抓取延迟加载的内容（如使用 <noscript><\/code> 标签提供兜底）。<\/li> 不要过度延迟<\/strong>：避免用户交互时等待资源加载，造成卡顿。可通过 rootMargin<\/code> 提前加载或预加载关键资源。<\/li> 性能度量<\/strong>：使用 Lighthouse 或 Web Vitals（如 LCP）评估懒加载效果，确保真正提升性能。<\/li> <\/ul> 总结<\/h3> 延迟加载通过将非关键资源推迟加载，显著提升页面初始性能。实现方案需根据资源类型和浏览器支持度选择：<\/p> 图片\/媒体<\/strong>：优先使用 loading="lazy"<\/code>，辅以 IntersectionObserver<\/code>。<\/li> JavaScript 模块<\/strong>：使用动态导入 import()<\/code> 和框架提供的懒加载 API。<\/li> 第三方脚本<\/strong>：动态创建 <script><\/code> 并设置 async<\/code>。结合预加载、错误处理和性能监控，可以构建高效且稳健的延迟加载策略。<\/li> <\/ol>

二、 图片延迟加载的实现<\/h3> 图片是最常见的延迟加载对象。现代浏览器已原生支持通过 loading="lazy"<\/code> 属性实现，但了解其底层原理有助于处理复杂场景。<\/p>

三、 JavaScript 模块的延迟加载<\/h3> 对于非核心功能代码，可采用动态导入（Dynamic Import）实现按需加载。<\/p>

二、图片延迟加载的实现<\/h3>
图片是最常见的延迟加载对象。现代浏览器已原生支持通过 `loading="lazy"<\/code> 属性实现，但了解其底层原理有助于处理复杂场景。<\/p>`

三、 JavaScript 模块的延迟加载<\/h3>
对于非核心功能代码，可采用动态导入（Dynamic Import）实现按需加载。<\/p>