懒加载与按需加载

懒加载与按需加载的概念

懒加载（Lazy Loading）和按需加载（On-Demand Loading）是前端性能优化中常用的两种技术手段。懒加载通常指延迟加载非关键资源，比如图片、视频等，直到它们即将进入可视区域时才加载。按需加载则更侧重于代码或模块的分割，只在需要时才动态加载对应的资源。这两种技术都能有效减少初始页面加载时间，提升用户体验。

图片懒加载的实现

图片懒加载是最常见的应用场景。传统的图片加载方式会一次性请求所有图片资源，而懒加载则只在图片即将出现在视口中时才加载。

<img data-src="image.jpg" class="lazy" alt="示例图片">

document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  
  if ("IntersectionObserver" in window) {
    const lazyImageObserver = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          const lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

这个实现使用了IntersectionObserver API来检测图片是否进入视口。当图片进入视口时，将data-src属性值赋给src属性，触发图片加载。

路由级别的按需加载

在单页应用(SPA)中，路由级别的按需加载可以显著提升首屏加载速度。以React为例：

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

React.lazy函数允许动态导入组件，Suspense组件则提供了加载中的回退UI。当用户导航到/about路由时，才会加载About组件的代码。

组件级别的按需加载

对于大型应用中的复杂组件，也可以实现更细粒度的按需加载：

const loadModal = () => import('./Modal');

function App() {
  const [showModal, setShowModal] = useState(false);
  const [ModalComponent, setModalComponent] = useState(null);

  const openModal = async () => {
    const { default: Modal } = await loadModal();
    setModalComponent(<Modal />);
    setShowModal(true);
  };

  return (
    <div>
      <button onClick={openModal}>打开弹窗</button>
      {showModal && ModalComponent}
    </div>
  );
}

这种方式下，Modal组件及其依赖的代码只有在用户点击按钮时才会被加载。

第三方库的按需加载

许多大型第三方库也支持按需加载功能。以lodash为例：

// 传统方式 - 导入整个库
import _ from 'lodash';

// 按需加载方式
import debounce from 'lodash/debounce';

button.addEventListener('click', debounce(() => {
  console.log('点击事件防抖处理');
}, 300));

对于支持ES模块的现代库，还可以使用动态导入：

const loadUtility = async () => {
  const { default: _ } = await import('lodash-es');
  // 使用lodash功能
};

懒加载的注意事项

实施懒加载时需要考虑几个关键因素：

1. 占位符设计：为懒加载元素设计合适的占位符，避免布局跳动
2. 预加载策略：对于可能很快需要的资源，可以提前少量预加载
3. 错误处理：网络请求可能失败，需要提供重试机制和错误回退
4. SEO影响：搜索引擎可能无法执行JavaScript，关键内容不应依赖懒加载

<div class="lazy-container">
  <img data-src="image.jpg" alt="产品图片" 
       class="lazy" 
       loading="lazy"
       onerror="this.src='fallback.jpg'">
  <div class="placeholder"></div>
</div>

按需加载的性能优化

结合Webpack等构建工具，可以进一步优化按需加载：

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

这样的配置会帮助自动分割代码块，实现更高效的按需加载。

浏览器原生支持

现代浏览器已经原生支持部分懒加载功能：

<!-- 原生图片懒加载 -->
<img src="image.jpg" loading="lazy" alt="示例">

<!-- iframe懒加载 -->
<iframe src="content.html" loading="lazy"></iframe>

loading属性支持三个值：

• lazy：延迟加载
• eager：立即加载
• auto：由浏览器决定

服务端渲染中的处理

在SSR应用中实现懒加载需要特殊处理：

// Next.js中的动态导入
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(
  () => import('../components/hello'),
  { 
    loading: () => <p>Loading...</p>,
    ssr: false // 禁用服务端渲染
  }
);

function Home() {
  return (
    <div>
      <DynamicComponent />
    </div>
  )
}

这种方式既保持了SSR的优点，又实现了客户端按需加载。

性能监控与调优

实施懒加载和按需加载后，需要监控实际效果：

// 使用Performance API监控资源加载
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(`资源: ${entry.name}, 加载耗时: ${entry.duration}ms`);
  });
});

observer.observe({entryTypes: ["resource"]});

// 记录用户交互到加载完成的时间
button.addEventListener('click', () => {
  const start = performance.now();
  
  import('./module').then(() => {
    const loadTime = performance.now() - start;
    console.log(`模块加载耗时: ${loadTime}ms`);
  });
});

这些数据可以帮助进一步优化加载策略和分割点。

移动端特殊考虑

移动网络环境下需要特别考虑：

1. 更激进的懒加载阈值：提前开始加载，抵消移动网络延迟
2. 连接类型感知：根据网络类型调整策略
3. 数据节省模式：尊重用户的流量限制设置

// 检测网络状况
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

if (connection) {
  if (connection.effectiveType === 'slow-2g') {
    // 更激进的懒加载策略
  }
  
  connection.addEventListener('change', updateLoadingStrategy);
}

缓存策略的结合

合理的缓存策略可以提升重复访问时的加载性能：

// Service Worker中缓存按需加载的模块
self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('/dist/') && 
      event.request.url.endsWith('.js')) {
    event.respondWith(
      caches.match(event.request).then((response) => {
        return response || fetch(event.request).then((response) => {
          const responseToCache = response.clone();
          caches.open('dynamic-cache').then((cache) => {
            cache.put(event.request, responseToCache);
          });
          return response;
        });
      })
    );
  }
});

这种策略使得首次加载后，后续的按需加载可以直接从缓存读取。