跳到主要内容

懒加载技术详解

概述​

懒加载（Lazy Loading）是一种延迟加载非关键资源的技术，通过按需加载来减少初始页面加载时间，提升用户体验。本文详细介绍各种懒加载技术的原理、实现方法和最佳实践。

懒加载原理​

传统加载 vs 懒加载​

传统加载方式：
┌─────────────────────────────────────────────────────────────┐
│                    页面初始加载                              │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐          │
│  │ 关键内容 │ │ 图片1   │ │ 图片2   │ │ 图片3   │          │
│  └─────────┘ └─────────┘ └─────────┘ └─────────┘          │
│                     ↓ 全部同时加载                          │
│                    加载时间: 3秒                            │
└─────────────────────────────────────────────────────────────┘

懒加载方式：
┌─────────────────────────────────────────────────────────────┐
│                    页面初始加载                              │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐          │
│  │ 关键内容 │ │ 占位符  │ │ 占位符  │ │ 占位符  │          │
│  └─────────┘ └─────────┘ └─────────┘ └─────────┘          │
│                     ↓ 只加载关键内容                        │
│                    加载时间: 1秒                            │
│                     ↓ 滚动时按需加载                        │
│                    图片1: 0.5秒                            │
│                    图片2: 0.5秒                            │
│                    图片3: 0.5秒                            │
└─────────────────────────────────────────────────────────────┘

懒加载触发时机​

懒加载触发时机图
┌─────────────────────────────────────────────────────────────┐
│                    视口区域                                 │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                                                     │   │
│  │                可见内容区域                          │   │
│  │                                                     │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐         │
│  │ 图片1   │ │ 图片2   │ │ 图片3   │ │ 图片4   │         │
│  │ (已加载) │ │ (已加载) │ │ (加载中) │ │ (待加载) │         │
│  └─────────┘ └─────────┘ └─────────┘ └─────────┘         │
│                                                             │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐         │
│  │ 图片5   │ │ 图片6   │ │ 图片7   │ │ 图片8   │         │
│  │ (待加载) │ │ (待加载) │ │ (待加载) │ │ (待加载) │         │
│  └─────────┘ └─────────┘ └─────────┘ └─────────┘         │
└─────────────────────────────────────────────────────────────┘

触发条件：
1. 元素进入视口
2. 用户滚动到元素附近
3. 用户交互触发
4. 预加载策略触发

图像懒加载​

原生Intersection Observer API​

// 基础图像懒加载实现
class ImageLazyLoader {
  constructor(options = {}) {
    this.options = {
      root: null,                    // 根元素
      rootMargin: '50px',           // 根元素边距
      threshold: 0.1,               // 可见阈值
      placeholder: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2YwZjBmMCIvPjwvc3ZnPg==',
      ...options
    };
    
    this.observer = null;
    this.images = new Set();
    this.init();
  }

  // 初始化观察器
  init() {
    this.observer = new IntersectionObserver(
      (entries) => this.handleIntersection(entries),
      this.options
    );
  }

  // 处理交叉观察
  handleIntersection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        this.loadImage(img);
        this.observer.unobserve(img);
        this.images.delete(img);
      }
    });
  }

  // 加载图像
  loadImage(img) {
    const src = img.dataset.src;
    if (!src) return;

    // 创建新图像对象进行预加载
    const tempImg = new Image();
    
    tempImg.onload = () => {
      img.src = src;
      img.classList.remove('lazy');
      img.classList.add('loaded');
      
      // 触发加载完成事件
      img.dispatchEvent(new CustomEvent('lazyloaded', {
        detail: { src, element: img }
      }));
    };

    tempImg.onerror = () => {
      img.classList.add('error');
      img.src = this.options.placeholder;
      
      // 触发加载失败事件
      img.dispatchEvent(new CustomEvent('lazyloaderror', {
        detail: { src, element: img }
      }));
    };

    tempImg.src = src;
  }

  // 添加图像到观察列表
  addImage(img) {
    if (!img.dataset.src) return;
    
    // 设置占位符
    img.src = this.options.placeholder;
    img.classList.add('lazy');
    
    // 添加到观察列表
    this.observer.observe(img);
    this.images.add(img);
  }

  // 添加多个图像
  addImages(images) {
    images.forEach(img => this.addImage(img));
  }

  // 销毁观察器
  destroy() {
    if (this.observer) {
      this.observer.disconnect();
      this.observer = null;
    }
    this.images.clear();
  }
}

// 使用示例
document.addEventListener('DOMContentLoaded', () => {
  const lazyLoader = new ImageLazyLoader({
    rootMargin: '100px',  // 提前100px开始加载
    threshold: 0.1
  });

  // 添加所有懒加载图像
  const lazyImages = document.querySelectorAll('img[data-src]');
  lazyLoader.addImages(lazyImages);

  // 监听加载事件
  document.addEventListener('lazyloaded', (e) => {
    console.log('图像加载完成:', e.detail.src);
  });

  document.addEventListener('lazyloaderror', (e) => {
    console.error('图像加载失败:', e.detail.src);
  });
});

响应式图像懒加载​

// 响应式图像懒加载
class ResponsiveImageLazyLoader extends ImageLazyLoader {
  constructor(options = {}) {
    super(options);
    this.breakpoints = options.breakpoints || {
      mobile: 768,
      tablet: 1024,
      desktop: 1200
    };
  }

  // 根据设备选择最佳图像
  selectBestImage(img) {
    const viewportWidth = window.innerWidth;
    const sources = img.dataset;
    
    let bestSrc = sources.src; // 默认源
    
    // 根据视口宽度选择最佳图像
    if (viewportWidth <= this.breakpoints.mobile && sources.srcMobile) {
      bestSrc = sources.srcMobile;
    } else if (viewportWidth <= this.breakpoints.tablet && sources.srcTablet) {
      bestSrc = sources.srcTablet;
    } else if (viewportWidth > this.breakpoints.desktop && sources.srcDesktop) {
      bestSrc = sources.srcDesktop;
    }
    
    return bestSrc;
  }

  // 重写加载图像方法
  loadImage(img) {
    const src = this.selectBestImage(img);
    if (!src) return;

    const tempImg = new Image();
    
    tempImg.onload = () => {
      img.src = src;
      img.classList.remove('lazy');
      img.classList.add('loaded');
      
      // 更新srcset属性
      if (img.dataset.srcset) {
        img.srcset = img.dataset.srcset;
      }
      
      img.dispatchEvent(new CustomEvent('lazyloaded', {
        detail: { src, element: img }
      }));
    };

    tempImg.onerror = () => {
      img.classList.add('error');
      img.src = this.options.placeholder;
      
      img.dispatchEvent(new CustomEvent('lazyloaderror', {
        detail: { src, element: img }
      }));
    };

    tempImg.src = src;
  }
}

// HTML示例
/*
<img 
  class="lazy"
  data-src="/images/hero.jpg"
  data-src-mobile="/images/hero-mobile.jpg"
  data-src-tablet="/images/hero-tablet.jpg"
  data-src-desktop="/images/hero-desktop.jpg"
  data-srcset="/images/hero.jpg 1x, /images/hero@2x.jpg 2x"
  alt="Hero Image"
  width="800"
  height="600"
>
*/

背景图像懒加载​

// 背景图像懒加载
class BackgroundImageLazyLoader extends ImageLazyLoader {
  constructor(options = {}) {
    super(options);
    this.loadedElements = new Set();
  }

  // 处理交叉观察（重写）
  handleIntersection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const element = entry.target;
        this.loadBackgroundImage(element);
        this.observer.unobserve(element);
        this.images.delete(element);
      }
    });
  }

  // 加载背景图像
  loadBackgroundImage(element) {
    const bgSrc = element.dataset.bgSrc;
    if (!bgSrc || this.loadedElements.has(element)) return;

    // 预加载背景图像
    const tempImg = new Image();
    
    tempImg.onload = () => {
      element.style.backgroundImage = `url(${bgSrc})`;
      element.classList.remove('lazy-bg');
      element.classList.add('bg-loaded');
      this.loadedElements.add(element);
      
      element.dispatchEvent(new CustomEvent('bgLazyloaded', {
        detail: { src: bgSrc, element }
      }));
    };

    tempImg.onerror = () => {
      element.classList.add('bg-error');
      
      element.dispatchEvent(new CustomEvent('bgLazyloaderror', {
        detail: { src: bgSrc, element }
      }));
    };

    tempImg.src = bgSrc;
  }

  // 添加背景图像元素
  addBackgroundElement(element) {
    if (!element.dataset.bgSrc) return;
    
    element.classList.add('lazy-bg');
    this.observer.observe(element);
    this.images.add(element);
  }
}

// CSS样式
/*
.lazy-bg {
  background-color: #f0f0f0;
  transition: background-image 0.3s ease;
}

.bg-loaded {
  background-color: transparent;
}
*/

组件懒加载​

React组件懒加载​

// React.lazy + Suspense
import React, { lazy, Suspense, useState, useEffect } from 'react';

// 懒加载组件
const LazyChart = lazy(() => import('./Chart'));
const LazyEditor = lazy(() => import('./Editor'));
const LazyCalendar = lazy(() => import('./Calendar'));

// 加载状态组件
const LoadingSpinner = () => (
  <div className="loading-spinner">
    <div className="spinner"></div>
    <p>组件加载中...</p>
  </div>
);

// 错误边界组件
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('组件加载错误:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-boundary">
          <h3>组件加载失败</h3>
          <p>{this.state.error?.message}</p>
          <button onClick={() => this.setState({ hasError: false })}>
            重试
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

// 智能懒加载组件
function SmartLazyComponent({ 
  componentName, 
  fallback = <LoadingSpinner />,
  onLoad,
  onError 
}) {
  const [Component, setComponent] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!componentName) return;

    setLoading(true);
    setError(null);

    // 动态导入组件
    import(`./${componentName}`)
      .then(module => {
        setComponent(() => module.default);
        setLoading(false);
        onLoad?.(module.default);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
        onError?.(err);
      });
  }, [componentName, onLoad, onError]);

  if (loading) return fallback;
  if (error) return <div>加载失败: {error.message}</div>;
  if (!Component) return null;

  return <Component />;
}

// 主应用组件
function App() {
  const [activeTab, setActiveTab] = useState('chart');

  return (
    <div className="app">
      <nav>
        <button onClick={() => setActiveTab('chart')}>图表</button>
        <button onClick={() => setActiveTab('editor')}>编辑器</button>
        <button onClick={() => setActiveTab('calendar')}>日历</button>
      </nav>
      
      <main>
        <ErrorBoundary>
          <Suspense fallback={<LoadingSpinner />}>
            {activeTab === 'chart' && <LazyChart />}
            {activeTab === 'editor' && <LazyEditor />}
            {activeTab === 'calendar' && <LazyCalendar />}
          </Suspense>
        </ErrorBoundary>
      </main>
    </div>
  );
}

Vue组件懒加载​

// Vue 3 异步组件
import { defineAsyncComponent, ref, onMounted } from 'vue';

// 基础异步组件
const AsyncChart = defineAsyncComponent(() => import('./Chart.vue'));
const AsyncEditor = defineAsyncComponent(() => import('./Editor.vue'));

// 带配置的异步组件
const AsyncCalendar = defineAsyncComponent({
  loader: () => import('./Calendar.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000,
  onError(error, retry, fail, attempts) {
    if (attempts <= 3) {
      retry();
    } else {
      fail();
    }
  }
});

// 智能懒加载组件
const SmartLazyComponent = defineAsyncComponent({
  loader: (componentName) => import(`./${componentName}.vue`),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorComponent
});

// 主应用组件
export default {
  name: 'App',
  components: {
    AsyncChart,
    AsyncEditor,
    AsyncCalendar
  },
  setup() {
    const activeTab = ref('chart');
    const loadedComponents = ref(new Set(['chart']));

    // 预加载组件
    const preloadComponent = (componentName) => {
      if (!loadedComponents.value.has(componentName)) {
        loadedComponents.value.add(componentName);
        // 触发预加载
        import(`./${componentName}.vue`);
      }
    };

    // 鼠标悬停预加载
    const handleMouseEnter = (componentName) => {
      preloadComponent(componentName);
    };

    return {
      activeTab,
      handleMouseEnter
    };
  },
  template: `
    <div class="app">
      <nav>
        <button 
          @click="activeTab = 'chart'"
          @mouseenter="handleMouseEnter('editor')"
          :class="{ active: activeTab === 'chart' }"
        >
          图表
        </button>
        <button 
          @click="activeTab = 'editor'"
          @mouseenter="handleMouseEnter('calendar')"
          :class="{ active: activeTab === 'editor' }"
        >
          编辑器
        </button>
        <button 
          @click="activeTab = 'calendar'"
          @mouseenter="handleMouseEnter('chart')"
          :class="{ active: activeTab === 'calendar' }"
        >
          日历
        </button>
      </nav>
      
      <main>
        <Suspense>
          <template #default>
            <component :is="'Async' + activeTab.charAt(0).toUpperCase() + activeTab.slice(1)" />
          </template>
          <template #fallback>
            <LoadingSpinner />
          </template>
        </Suspense>
      </main>
    </div>
  `
};

路由懒加载​

React Router懒加载​

// React Router + 懒加载
import React, { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';

// 懒加载页面组件
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Products = lazy(() => import('./pages/Products'));
const ProductDetail = lazy(() => import('./pages/ProductDetail'));
const Contact = lazy(() => import('./pages/Contact'));
const NotFound = lazy(() => import('./pages/NotFound'));

// 加载状态组件
const PageLoader = () => (
  <div className="page-loader">
    <div className="loader-spinner"></div>
    <p>页面加载中...</p>
  </div>
);

// 路由配置
const AppRoutes = () => (
  <BrowserRouter>
    <Suspense fallback={<PageLoader />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/products" element={<Products />} />
        <Route path="/products/:id" element={<ProductDetail />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/404" element={<NotFound />} />
        <Route path="*" element={<Navigate to="/404" replace />} />
      </Routes>
    </Suspense>
  </BrowserRouter>
);

export default AppRoutes;

Vue Router懒加载​

// Vue Router + 懒加载
import { createRouter, createWebHistory } from 'vue-router';

// 路由配置
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue'),
    meta: { title: '首页' }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue'),
    meta: { title: '关于我们' }
  },
  {
    path: '/products',
    name: 'Products',
    component: () => import('./views/Products.vue'),
    meta: { title: '产品列表' }
  },
  {
    path: '/products/:id',
    name: 'ProductDetail',
    component: () => import('./views/ProductDetail.vue'),
    meta: { title: '产品详情' }
  },
  {
    path: '/contact',
    name: 'Contact',
    component: () => import('./views/Contact.vue'),
    meta: { title: '联系我们' }
  }
];

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes
});

// 路由守卫 - 预加载下一个可能访问的页面
router.beforeEach((to, from, next) => {
  // 设置页面标题
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  
  // 预加载相关页面
  if (to.name === 'Products') {
    // 预加载产品详情页
    import('./views/ProductDetail.vue');
  }
  
  next();
});

export default router;

数据懒加载​

分页数据懒加载​

// 分页数据懒加载
class PaginationLazyLoader {
  constructor(options = {}) {
    this.options = {
      pageSize: 20,
      threshold: 100, // 距离底部100px时触发加载
      ...options
    };
    
    this.currentPage = 1;
    this.loading = false;
    this.hasMore = true;
    this.data = [];
    this.observer = null;
    
    this.init();
  }

  // 初始化
  init() {
    this.observer = new IntersectionObserver(
      (entries) => this.handleIntersection(entries),
      { threshold: 0.1 }
    );
    
    // 观察底部元素
    this.observeBottom();
  }

  // 观察底部元素
  observeBottom() {
    const bottomElement = document.querySelector('.bottom-trigger');
    if (bottomElement) {
      this.observer.observe(bottomElement);
    }
  }

  // 处理交叉观察
  handleIntersection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting && !this.loading && this.hasMore) {
        this.loadNextPage();
      }
    });
  }

  // 加载下一页
  async loadNextPage() {
    if (this.loading || !this.hasMore) return;
    
    this.loading = true;
    this.emit('loading', { page: this.currentPage });
    
    try {
      const newData = await this.fetchData(this.currentPage);
      
      if (newData.length > 0) {
        this.data.push(...newData);
        this.currentPage++;
        this.emit('loaded', { 
          page: this.currentPage - 1, 
          data: newData,
          total: this.data.length
        });
      } else {
        this.hasMore = false;
        this.emit('complete', { total: this.data.length });
      }
    } catch (error) {
      this.emit('error', { error, page: this.currentPage });
    } finally {
      this.loading = false;
      this.emit('loadingEnd');
    }
  }

  // 获取数据（需要子类实现）
  async fetchData(page) {
    throw new Error('fetchData方法需要子类实现');
  }

  // 事件发射器
  emit(event, data) {
    const customEvent = new CustomEvent(`pagination:${event}`, { detail: data });
    document.dispatchEvent(customEvent);
  }

  // 重置
  reset() {
    this.currentPage = 1;
    this.loading = false;
    this.hasMore = true;
    this.data = [];
  }

  // 销毁
  destroy() {
    if (this.observer) {
      this.observer.disconnect();
      this.observer = null;
    }
  }
}

// 具体实现示例
class ProductListLazyLoader extends PaginationLazyLoader {
  async fetchData(page) {
    const response = await fetch(`/api/products?page=${page}&size=${this.options.pageSize}`);
    const data = await response.json();
    return data.products;
  }
}

// 使用示例
const productLoader = new ProductListLazyLoader({
  pageSize: 20,
  threshold: 100
});

// 监听事件
document.addEventListener('pagination:loading', (e) => {
  console.log('开始加载第', e.detail.page, '页');
  showLoadingIndicator();
});

document.addEventListener('pagination:loaded', (e) => {
  console.log('第', e.detail.page, '页加载完成，数据量:', e.detail.data.length);
  renderProducts(e.detail.data);
  hideLoadingIndicator();
});

document.addEventListener('pagination:complete', (e) => {
  console.log('所有数据加载完成，总计:', e.detail.total);
  showCompleteMessage();
});

document.addEventListener('pagination:error', (e) => {
  console.error('加载失败:', e.detail.error);
  showErrorMessage();
});

懒加载优化策略​

预加载策略​

// 智能预加载策略
class SmartPreloader {
  constructor() {
    this.preloadedResources = new Set();
    this.userBehavior = new Map();
    this.observeUserBehavior();
  }

  // 观察用户行为
  observeUserBehavior() {
    // 监听鼠标悬停
    document.addEventListener('mouseover', (e) => {
      const link = e.target.closest('a');
      if (link && link.href) {
        this.preloadResource(link.href);
      }
    });

    // 监听路由变化
    window.addEventListener('popstate', () => {
      this.analyzeAndPreload();
    });
  }

  // 预加载资源
  preloadResource(url) {
    if (this.preloadedResources.has(url)) return;
    
    // 预加载页面
    if (url.includes('/products/')) {
      this.preloadPage(url);
    }
    
    // 预加载图像
    if (url.includes('/images/')) {
      this.preloadImage(url);
    }
    
    this.preloadedResources.add(url);
  }

  // 预加载页面
  preloadPage(url) {
    const link = document.createElement('link');
    link.rel = 'prefetch';
    link.href = url;
    document.head.appendChild(link);
  }

  // 预加载图像
  preloadImage(url) {
    const img = new Image();
    img.src = url;
  }

  // 分析并预加载
  analyzeAndPreload() {
    const currentPath = window.location.pathname;
    const nextPaths = this.predictNextPaths(currentPath);
    
    nextPaths.forEach(path => this.preloadResource(path));
  }

  // 预测下一个可能访问的路径
  predictNextPaths(currentPath) {
    const pathMap = {
      '/': ['/products', '/about'],
      '/products': ['/products/1', '/cart'],
      '/products/1': ['/products/2', '/cart']
    };
    
    return pathMap[currentPath] || [];
  }
}

性能监控​

// 懒加载性能监控
class LazyLoadMonitor {
  constructor() {
    this.metrics = {
      totalRequests: 0,
      successfulLoads: 0,
      failedLoads: 0,
      averageLoadTime: 0,
      loadTimes: []
    };
    
    this.observeLazyLoadEvents();
  }

  // 观察懒加载事件
  observeLazyLoadEvents() {
    // 监听图像懒加载
    document.addEventListener('lazyloaded', (e) => {
      this.recordSuccessfulLoad(e.detail);
    });

    document.addEventListener('lazyloaderror', (e) => {
      this.recordFailedLoad(e.detail);
    });

    // 监听组件懒加载
    document.addEventListener('componentLazyloaded', (e) => {
      this.recordSuccessfulLoad(e.detail);
    });

    document.addEventListener('componentLazyloaderror', (e) => {
      this.recordFailedLoad(e.detail);
    });
  }

  // 记录成功加载
  recordSuccessfulLoad(detail) {
    this.metrics.totalRequests++;
    this.metrics.successfulLoads++;
    
    if (detail.loadTime) {
      this.metrics.loadTimes.push(detail.loadTime);
      this.updateAverageLoadTime();
    }
  }

  // 记录加载失败
  recordFailedLoad(detail) {
    this.metrics.totalRequests++;
    this.metrics.failedLoads++;
  }

  // 更新平均加载时间
  updateAverageLoadTime() {
    const sum = this.metrics.loadTimes.reduce((a, b) => a + b, 0);
    this.metrics.averageLoadTime = sum / this.metrics.loadTimes.length;
  }

  // 获取性能报告
  getPerformanceReport() {
    const successRate = (this.metrics.successfulLoads / this.metrics.totalRequests * 100).toFixed(2);
    
    return {
      totalRequests: this.metrics.totalRequests,
      successRate: `${successRate}%`,
      averageLoadTime: `${this.metrics.averageLoadTime.toFixed(2)}ms`,
      failedLoads: this.metrics.failedLoads
    };
  }
}

// 使用监控器
const lazyLoadMonitor = new LazyLoadMonitor();

// 定期输出性能报告
setInterval(() => {
  const report = lazyLoadMonitor.getPerformanceReport();
  console.log('懒加载性能报告:', report);
}, 30000);

最佳实践​

1. 懒加载策略选择​

  • 图像: 使用Intersection Observer API
  • 组件: 使用框架提供的懒加载机制
  • 路由: 结合路由系统实现页面级懒加载
  • 数据: 实现分页和虚拟滚动

2. 预加载优化​

  • 关键资源使用preload
  • 可能资源使用prefetch
  • 基于用户行为智能预加载
  • 避免过度预加载

3. 性能监控​

  • 监控加载成功率
  • 跟踪加载时间
  • 分析用户行为
  • 优化预加载策略

4. 用户体验​

  • 提供加载状态指示
  • 实现错误处理和重试
  • 使用骨架屏和占位符
  • 平滑的加载过渡

通过合理的懒加载策略，可以显著提升应用性能，改善用户体验，是现代前端应用不可或缺的优化技术。