js 延迟加载依赖

在JavaScript中，延迟加载（Lazy Loading）是一种优化网页或应用的加载时间的技术。它通过推迟加载非关键资源，直到用户需要它们时才进行加载，从而提高页面的初始加载速度和性能。

基础概念

延迟加载依赖指的是在JavaScript中，某些功能或模块的加载被推迟到需要的时候，而不是在页面加载时就立即加载。这通常通过监听特定事件（如滚动、点击等）或使用Intersection Observer API来实现。

类型

图片延迟加载：当用户滚动到图片位置时才加载图片。
组件延迟加载：当用户需要使用某个功能时才加载对应的JavaScript模块。
路由延迟加载：在单页应用（SPA）中，只在用户导航到某个路由时才加载对应的组件。

应用场景

图片密集型网站：如电商网站、社交媒体平台等。
大型单页应用：如管理后台、复杂的企业级应用等。
移动应用：减少初次启动时间，提高响应速度。

示例代码

图片延迟加载

<img data-src="image.jpg" class="lazy-load">

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy-load"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy-load");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Fallback for browsers that do not support IntersectionObserver
    // Here you can use a scroll event listener to load images when they are in view
  }
});

组件延迟加载（使用React和React.lazy）

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

遇到的问题及解决方法

延迟加载导致的闪烁问题：当图片或组件加载完成后，可能会出现闪烁现象。可以通过CSS设置占位符或使用渐显效果来解决。
浏览器兼容性问题：不是所有浏览器都支持Intersection Observer API。可以通过Polyfill或回退方案（如scroll事件监听）来解决。
性能问题：虽然延迟加载可以提高初始加载速度，但如果实现不当，可能会导致后续加载时的性能问题。需要合理管理加载逻辑和资源请求。

通过合理使用延迟加载技术，可以显著提高网页或应用的性能和用户体验。