资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

深入解读：懒加载技术全面指南，提升网页性能的必备技能！

创作时间:

作者:

@小白创作中心

深入解读：懒加载技术全面指南，提升网页性能的必备技能！

引用

CSDN

https://blog.csdn.net/weixin_52648900/article/details/142251530

懒加载技术是前端开发中提升网页性能的重要手段，通过延迟加载非首屏资源，可以显著提升页面加载速度和用户体验。本文将全面介绍图片懒加载、路由懒加载、组件懒加载以及其他资源懒加载的技术实现，帮助开发者掌握这一必备技能。

1. 图片懒加载

最熟悉的莫过于图片懒加载啦。

1.1 什么是图片懒加载？

图片懒加载的目的是当图片进入视口（即用户可以看到的位置）时，才加载该图片文件。如果页面有很多图片，尤其是首屏之外的图片，懒加载可以避免一次性加载所有图片，从而提升页面的渲染性能。

1.2 方法

方法一：使用 HTML5 loading="lazy" 实现图片懒加载

HTML5 提供了一个原生属性 loading，可以直接应用于 <img> 标签。使用 loading="lazy"，浏览器会自动处理图片的懒加载。

举个 🌰

<img src="example.jpg" alt="Example Image" loading="lazy">

解释 loading="lazy"：浏览器会自动检测图片是否进入视口，只有图片快要滚动到可视区域时才开始加载图片。

方法二：使用 JavaScript 实现图片懒加载

最常见的方式是使用 IntersectionObserver API，它可以检测元素是否进入视口，并在元素进入视口时执行某些操作，比如加载图片。

举个 🌰

<body>
  <!-- 使用 data-src 属性来存储图片的真实路径，避免页面初始化时加载图片 -->
  <img data-src="example.jpg" alt="Example Image" class="lazy" />
</body>
<script>
  // 获取所有带有 lazy 类的图片
  const lazyImages = document.querySelectorAll('img.lazy');
  // 使用 IntersectionObserver 监听图片是否进入视口
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      // 如果图片进入视口
      if (entry.isIntersecting) {
        const img = entry.target;
        // 将 data-src 的值赋给 img 的 src，开始加载图片
        img.src = img.getAttribute('data-src');
        // 移除 lazy 类，以避免重复加载
        img.classList.remove('lazy');
        // 停止观察该图片
        observer.unobserve(img);
      }
    });
  });
  // 遍历所有的懒加载图片，并为每个图片添加观察
  lazyImages.forEach((image) => observer.observe(image));
</script>

解释：

使用 data-src 属性存储图片的真实路径，避免在页面加载时立即加载图片。
IntersectionObserver：这是一个浏览器 API，用于观察元素是否进入或离开视口。entry.isIntersecting：判断图片是否已经进入视口。observer.unobserve(img)：当图片加载完成后，停止监听该图片，避免重复操作。

2. 路由懒加载

2.1 什么是路由懒加载？

在单页面应用程序（SPA）中，页面通常由不同的路由组件构成。默认情况下，所有这些路由组件在页面首次加载时就会一起被加载进来。然而，如果用户仅访问了某个页面，而没有访问其他页面，这会导致大量不必要的资源加载。为了解决这个问题，采用路由懒加载，即按需加载路由组件，只有在用户实际访问某个路由时，才加载对应的组件文件。

2.2 方法

使用 Vue Router 实现路由懒加载

Vue Router 是 Vue.js 提供的官方路由库，支持路由懒加载。在配置路由时，可以通过动态 import 的方式来实现懒加载。

举个 🌰

// 导入 Vue Router 创建函数
import { createRouter, createWebHistory } from 'vue-router';
// 路由配置
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'), // 懒加载 Home 组件
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'), // 懒加载 About 组件
  },
];
// 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 历史模式
  routes,
});
export default router;

解释：
component: () => import('@/views/Home.vue')：这里使用动态导入（ import() ），它会返回一个 Promise，表示只有当用户访问该路由时，才会加载 Home.vue 文件。

当用户导航到 /about 路径时，About.vue 组件才会被异步加载，从而减少初始加载时需要加载的资源。

优点：

提升首屏加载速度：初始加载时，只会加载用户访问的页面对应的组件，其他组件等用户访问时才会加载。
减少不必要的资源浪费：避免加载用户不会访问的页面，节省带宽和服务器资源。

3. 组件懒加载

3.1 什么是组件懒加载？

在 Vue.js 中，组件懒加载的原理与路由懒加载类似。默认情况下，所有组件在页面初始化时都会被加载，但如果某些组件在特定情况下才会被使用（例如在某个弹窗中或者在用户点击某个按钮之后），提前加载这些组件会浪费资源。通过组件懒加载，可以在真正需要渲染组件时才加载它，从而减少初始加载时的资源消耗。

3.2 方法

使用 Vue 的 defineAsyncComponent 实现组件懒加载

Vue 提供了 defineAsyncComponent 方法，允许开发者将组件定义为异步组件。只有当该组件实际渲染时，Vue 才会加载它。

举个 🌰

import { defineAsyncComponent } from 'vue';
// 使用 defineAsyncComponent 定义异步加载的组件
const AsyncComponent = defineAsyncComponent(() => {
  // 返回动态导入的组件
  return import('@/components/HeavyComponent.vue');
});
export default {
  components: {
    // 注册异步组件
    AsyncComponent,
  },
};

在这种方式下，如果用户不访问该组件，浏览器不会发起 HTTP 请求来加载它，从而节省资源。

3.3 使用场景

弹窗、模态框等组件，这些组件通常在用户交互时才会展示。
某些性能开销较大的组件，只有在用户需要时才加载。

3.4 结合 Vue 的 v-if 条件渲染

组件懒加载通常与 v-if 条件渲染结合使用，只有当某个条件满足时，才渲染这个异步组件。

<template>
  <div>
    <button @click="showComponent = !showComponent">切换组件</button>
    <!-- 只有当 showComponent 为 true 时，才渲染 AsyncComponent -->
    <AsyncComponent v-if="showComponent" />
  </div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
export default {
  components: {
    AsyncComponent: defineAsyncComponent(() => import('@/components/HeavyComponent.vue')),
  },
  data() {
    return {
      showComponent: false, // 控制组件显示的布尔值
    };
  },
};
</script>

4. 其他懒加载技术

除了以上，还有一些其他的资源，比如第三方库、脚本、样式等也可以通过懒加载技术进行优化。通过按需加载这些资源，可以进一步提升页面性能。

4.1 第三方库懒加载

很多时候，我们会引入一些大型的第三方库，比如图表库、富文本编辑器等，但这些库并不是在所有场景下都使用。为了避免在页面初始加载时引入过多不必要的资源，可以对这些第三方库进行懒加载。

举个 🌰

<template>
  <div ref="chartContainer" style="height: 400px"></div>
</template>
<script>
export default {
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    // 在组件挂载后，才去加载 ECharts 库
    import('echarts')
      .then((echarts) => {
        // 初始化图表实例
        this.chartInstance = echarts.init(this.$refs.chartContainer);
        // 设置图表的配置项
        this.chartInstance.setOption({
          title: {
            text: '懒加载 ECharts 图表',
          },
          xAxis: {
            type: 'category', // 设置为类目轴（用于柱状图等需要坐标轴的图表）
            data: ['A', 'B', 'C', 'D'], // x轴的类目数据
          },
          yAxis: {
            type: 'value', // 设置为数值轴
          },
          series: [
            {
              data: [1, 2, 3, 4], // 数据与x轴类目对应
              type: 'bar', // 设置为柱状图
            },
          ],
        });
      })
      .catch((error) => {
        console.error('Failed to load ECharts:', error);
      });
  },
};
</script>

使用 import('echarts') 异步导入第三方库 ECharts，只有当该组件挂载后才开始加载 ECharts，从而减少初始的 JS 体积。这种方式特别适合那些加载较大且使用频率较低的库，比如图表库、编辑器库等。

展示如下（有一个动态效果）：

4.2 JavaScript 文件懒加载

某些 JavaScript 脚本可能只在页面的某些特定交互或用户行为后才需要，比如表单校验脚本、动画库等。这时，可以通过动态创建 <script> 标签的方式实现懒加载。

function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve();
    script.onerror = () => reject();
    document.head.appendChild(script);
  });
}
// 当用户点击按钮时，加载动画库
document.querySelector('#loadButton').addEventListener('click', () => {
  loadScript('https://example.com/animation-lib.js').then(() => {
    console.log('动画库加载完成'); 
  });
});

只有当用户点击按钮时，才会加载动画库 js 文件，从而避免在页面初始加载时引入不必要的脚本。

4.3 CSS 样式懒加载

某些 CSS 样式表可能只在页面的特定部分才会用到，比如针对特定主题的样式表。这时可以通过动态加载样式文件，减少页面初始的 CSS 文件体积。

举个 🌰

function loadCSS(href) {
  return new Promise((resolve, reject) => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    link.onload = () => resolve();
    link.onerror = () => reject();
    document.head.appendChild(link);
  });
}
// 当用户切换主题时，加载对应的 CSS 文件
document.querySelector('#themeButton').addEventListener('click', () => {
  loadCSS('https://example.com/dark-theme.css').then(() => {
    console.log('暗色主题样式加载完成');
  });
});

当用户触发某个行为（如点击按钮切换主题）时，才加载与主题相关的样式文件，避免不必要的样式加载。

5. 总结

路由懒加载：通过动态 import 方式，将路由组件的加载推迟到用户访问对应路由时。这样可以减少首屏代码量，提升初始加载速度。
图片懒加载：通过 HTML5 的 loading="lazy" 属性或使用 JavaScript 的 IntersectionObserver API 实现，确保只有图片滚动到用户视口时才开始加载，从而提高页面渲染性能。
组件懒加载：通过 defineAsyncComponent 按需加载组件，减少初始加载的代码量，特别适用于某些较大且使用频率较低的组件。
第三方库懒加载：在需要时才加载大型的第三方库，避免无谓的加载，提升性能。
脚本懒加载：通过动态创建 <script> 标签，按需加载特定 JavaScript 文件，特别适用于用户行为触发的场景。
CSS 懒加载：使用动态 <link> 标签按需加载 CSS 样式，减少初始加载时的 CSS 文件大小。

懒加载不仅可以提升页面性能，还能为用户提供更好的体验，要合理的使用哦！