1.懒加载讲下原理和在vue中又怎么实现懒加载

书诚小驿2024/10/01前端面经Vue

一、原理

懒加载（Lazy Loading）是一种延迟加载技术，其原理是在需要的时候才加载数据或资源，而不是在页面加载时就将所有内容一次性加载完成。

按需加载：懒加载的核心思想是“按需加载”，即只有当用户需要某个资源时，才进行加载。这避免了在页面初次加载时加载过多不必要的资源，从而减少了页面加载时间和服务器负载。
占位与替换：在懒加载实现中，通常会先使用占位符（如一张小图片或空白区域）来占据实际资源的位置。当用户滚动页面或触发其他事件时，JavaScript 代码会判断占位符所在的元素是否进入了可视区域。如果进入了可视区域，就使用真实的资源替换占位符。
监听事件：懒加载通常依赖于监听浏览器的事件来实现，如滚动事件、点击事件等。当用户滚动页面时，JavaScript 代码会检查哪些资源需要被加载，并动态地加载它们。
资源缓存：为了提高性能，浏览器会对已加载的资源进行缓存。当用户再次访问相同的资源时，可以直接从缓存中获取，而无需再次从服务器加载。
骨架屏：是一种在页面数据加载完成前，先给用户展示出页面的大致结构（通常使用灰色占位图）的加载控件。当应用程序正在加载内容时，骨架屏可以为用户提供视觉反馈，减少感知的加载时间，并提升用户体验。

二、应用场景

图片懒加载：在网页中，如果一次性加载所有的图片，会导致页面加载速度变慢。通过图片懒加载技术，可以在页面初次加载时只加载可视区域内的图片，当用户滚动页面时，再动态加载其他区域的图片。
视频懒加载：类似于图片懒加载，视频懒加载也是在用户滚动到可视区域时才加载视频资源。
文章内容懒加载：在一些长文本页面中，如果一次性加载所有的内容，会导致页面加载速度变慢。通过文章内容懒加载技术，可以只加载可视区域内的内容，当用户滚动页面时再加载其他内容。
脚本懒加载：在网页中，有些脚本可能并不是在页面加载时就需要执行，而是在用户交互或特定条件下才需要执行。通过脚本懒加载技术，可以延迟加载这些脚本，减少页面初始化时的资源消耗。

三、在 Vue.js 中，懒加载（Lazy Loading）的实现方式

使用动态 import()

Vue.js 官方推荐的方法，它利用了 JavaScript 的 ES6 动态 import() 语法，可以在需要的时候加载组件。

// 在路由配置中使用动态 import()
const Foo = () => import("./Foo.vue");
const Bar = () => import("./Bar.vue");

const router = new VueRouter({
  routes: [
    { path: "/foo", component: Foo },
    { path: "/bar", component: Bar },
  ],
});

使用 Vue Router 的懒加载功能

Vue Router 内置了对懒加载的支持，你只需在路由配置中使用动态 import() 即可。

const router = new VueRouter({
  routes: [
    {
      path: "/about",
      name: "About",
      // 使用动态 import() 语法懒加载组件
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue"),
    },
    // 其他路由配置...
  ],
});

使用异步组件

Vue.js 还支持异步组件，这允许你在需要时定义组件，而不是在初始化时。虽然这种方法不如动态 import() 普遍，但在某些场景下仍然有用。

Vue.component("async-webpack-example", () => ({
  // Webpack 会自动将这段代码分割到一个单独的 chunk 文件中
  // 这个 chunk 会在组件被请求时由 Webpack 动态加载
  component: import("./my-async-component"),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000,
}));

使用第三方库（如 vue-lazyload）

如果你需要实现图片的懒加载，可以使用第三方库如 vue-lazyload。

// 安装 vue-lazyload
npm install vue-lazyload --save

// 在你的 Vue 应用中使用它
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
});

// 在模板中使用
<template>
  <div>
    <img v-lazy="imageSrc" alt="Description">
  </div>
</template>

目录