【VUE】解决图片视频加载缓慢/首屏加载白屏的问题

1 问题描述

在 Vue3 项目中,有时候会出现图片视频加载缓慢、首屏加载白屏的问题

2 原因分析

通常是由以下原因导致的:

  1. 图片或视频格式不当:如果图片或视频格式选择不当,比如选择了无损压缩格式,可能会导致文件大小过大,从而影响加载速度。

  2. 页面中同时加载了大量的图片和视频,导致请求次数过多,网络传输速度受限,从而影响页面加载速度。

  3. 页面中的图片和视频没有进行优化处理,比如没有进行压缩、没有使用 CDN 加速等。

  4. 页面的 HTML、CSS、JavaScript 代码没有进行优化,比如没有使用 webpack 进行打包、没有使用代码分割技术等,导致页面加载时间过长。

  5. 页面中的图片和视频没有使用懒加载技术,导致页面一次性加载过多的资源,从而导致页面加载速度变慢。

  6. 网络状况不佳,比如网络延迟、带宽受限等,都可能导致图片和视频加载缓慢。

  7. 服务器响应时间过长:如果服务器响应时间过长,会导致页面请求资源的时间变慢,从而影响页面加载速度。

  8. 使用了不稳定的第三方库:如果使用了不稳定的第三方库或者组件,可能会导致页面加载速度变慢。

  9. 浏览器缓存策略不当:如果浏览器缓存策略设置不当,可能会导致浏览器重复请求资源,从而影响页面加载速度。

  10. 网络安全策略较为严格:如果网络安全策略较为严格,可能会导致浏览器请求资源时遇到一些限制,从而影响页面加载速度。

因此,在开发 Vue3 项目时,需要注意对图片和视频进行优化处理,减少请求次数,使用懒加载技术,优化代码等,来提升页面加载速度,避免出现加载缓慢、首屏加载白屏的问题。

3 解决方案

图片和视频加载缓慢、导致首屏加载白屏的问题,通常可以从以下几个方面入手来解决:

  1. 图片和视频的优化
  2. 懒加载
  3. 骨架屏
  4. 代码优化

3.1 图片和视频的优化

可以通过图片压缩、视频压缩等技术来减小文件大小,从而提高加载速度。同时,还可以通过 CDN 加速来加快资源加载速度。

可以从以下几个方法入手:

  1. 压缩图片或视频
  2. 选择合适的图片或视频格式
  3. 使用图片或视频 CDN 加速
  4. 使用懒加载技术

3.1.1 压缩图片或视频

可以使用图片或视频压缩工具,将文件大小压缩至合适的大小。对于图片,可以使用在线图片压缩工具或者 Photoshop 等图片编辑软件进行压缩;对于视频,可以使用视频压缩软件,如 HandBrake 等进行压缩。

压缩工具推荐

以下是几个常用的在线图片压缩工具:

TinyPNG 是一个免费的在线图片压缩工具,可以将 PNG 和 JPEG 格式的图片压缩至合适的大小,而且不会影响图片质量。

Compressor.io 是一个免费的在线图片压缩工具,可以压缩 JPEG、PNG、SVG 和 GIF 等格式的图片。它可以将图片压缩至较小的大小,而且不会影响图片质量。

Kraken 是一个在线图片优化和压缩服务,可以将 JPEG、PNG 和 GIF 等格式的图片压缩至最小的文件大小。Kraken 还提供了 API 接口,可以方便地集成到项目中。

ImageOptim 是一个免费的图片优化工具,它可以自动压缩 JPEG、PNG 和 GIF 等格式的图片,并且可以自动删除图片中的元数据和不必要的信息,从而减小文件大小。

3.1.2 选择合适的图片或视频格式

选择合适的图片或视频格式也可以减小文件大小。例如,对于图片,可以选择 JPEG 或者 WebP 格式,对于视频,可以选择 H.264 或者 H.265 格式。

3.1.3 使用图片或视频 CDN 加速

可以使用图片或视频 CDN 加速,将图片或视频资源分布在全球各地的 CDN 节点上,从而加快资源的传输速度,提高页面加载速度。

3.1.4 使用懒加载技术

可以使用懒加载技术,将图片或视频的加载延迟到用户需要访问它们时再加载,从而减少页面一次性请求过多的资源,提高页面加载速度。

3.2 懒加载

使用懒加载技术,可以将图片和视频的加载延迟到用户需要访问它们时再加载,从而减少页面一次性加载过多的资源,提高首屏加载速度。
以下是使用懒加载技术实现图片和视频懒加载的方法:

使用 Intersection Observer API

使用 Intersection Observer API

Intersection Observer API 是一种新的浏览器 API,可以监听指定元素是否进入了视口,从而触发回调函数。

可以通过监听图片或视频元素是否进入了视口,从而触发加载图片或视频的操作。

使用示例

当然可以,下面是一个使用 Intersection Observer API 实现图片懒加载的 Vue 3 示例:

在组件中引入 Intersection Observer API

在 Vue 3 中,可以通过在组件中使用 onMounted 钩子函数来引入 Intersection Observer API:

javascript 复制代码
<template>
  <img v-for="image in images" :key="image.id" :src="image.placeholder" :data-src="image.src" alt="">
</template>

<script>
import { onMounted } from 'vue';

export default {
  name: 'LazyLoadImages',
  data() {
    return {
      images: [
        {
          id: 1,
          src: 'path/to/image1.jpg',
          placeholder: 'path/to/placeholder1.jpg'
        },
        {
          id: 2,
          src: 'path/to/image2.jpg',
          placeholder: 'path/to/placeholder2.jpg'
        },
        // ...
      ]
    };
  },
  setup() {
    onMounted(() => {
      // 创建 IntersectionObserver 实例
      const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const lazyImage = entry.target;
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.removeAttribute('data-src');
            observer.unobserve(lazyImage);
          }
        });
      });

      // 监听图片元素
      const lazyImages = document.querySelectorAll('img[data-src]');
      lazyImages.forEach(image => {
        observer.observe(image);
      });
    });
  }
};
</script>

在上面的示例中,通过 onMounted 钩子函数创建了 IntersectionObserver 实例,并在其中监听了所有带有 "data-src" 属性的图片元素。

当图片元素进入视口时,我们通过 isIntersecting 属性判断图片是否进入了视口,如果进入了视口就将 "data-src" 属性的值赋给 "src" 属性,从而加载图片资源,同时移除 "data-src" 属性,避免重复加载。

最后,通过 unobserve 方法停止监听图片元素。

这样,就成功地使用 Intersection Observer API 实现了图片的懒加载。

使用第三方库

除了使用 Intersection Observer API,还可以使用一些第三方库来实现图片和视频的懒加载,

如 LazyLoad、Lozad.js、LazyLoad-xt 等。这些库可以更快速地实现懒加载效果,并提供了更多的配置选项,例如触发懒加载的条件、动画效果等。具体使用方法可以参考它们的官方文档。

使用示例

当然可以,以下是一个使用 LazyLoad 库实现图片懒加载的 Vue 3 示例:

安装和引入 LazyLoad 库

在终端中安装 LazyLoad 库:

npm install lazyload --save

然后,在 Vue 3 组件中引入 LazyLoad 库:

javascript 复制代码
<template>
  <img v-for="image in images" :key="image.id" :src="image.placeholder" data-src="image.src" alt="">
</template>

<script>
import LazyLoad from 'lazyload';

export default {
  name: 'LazyLoadImages',
  data() {
    return {
      images: [
        {
          id: 1,
          src: 'path/to/image1.jpg',
          placeholder: 'path/to/placeholder1.jpg'
        },
        {
          id: 2,
          src: 'path/to/image2.jpg',
          placeholder: 'path/to/placeholder2.jpg'
        },
        // ...
      ]
    };
  },
  mounted() {
    // 初始化 LazyLoad
    const lazyLoadInstance = new LazyLoad({
      elements_selector: 'img[data-src]',
      threshold: 0,
      // 配置选项
    });

    // 手动触发加载
    lazyLoadInstance.update();
  }
};
</script>

在上面的示例中,

先通过 npm install 命令安装了 LazyLoad 库,并在组件中引入了该库。

然后,在组件的 mounted 钩子函数中初始化了 LazyLoad 并传入了图片元素的选择器,以及其它一些配置选项。

最后,通过 update 方法手动触发图片的加载。
这样,就成功地使用 LazyLoad 库实现了图片的懒加载。

除了图片懒加载,LazyLoad 库还可以用于懒加载视频、背景图等资源。具体使用方法可以参考 LazyLoad 的官方文档。

3.3 骨架屏

骨架屏(Skeleton Screen)是一种页面加载优化的技术,可以在页面加载过程中显示一个简单的灰色框架,代替还未加载的内容。骨架屏可以提高用户体验,让用户感觉页面加载速度更快,同时也可以减少用户的焦虑感。

在 Vue 3 中,可以使用一些第三方库来实现骨架屏效果,例如 vue-skeleton-webpack-plugin、vue-content-loader、vue-loading-skeleton 等。

3.3.1 如何在Vue 3中使用vue-content-loader实现骨架屏效果?

vue-content-loader 是一个 Vue.js 组件库,可以帮助我们实现骨架屏效果。它提供了多种预定义的 SVG 形状,可以快速生成骨架屏模板,并且可以自定义颜色、大小、动画等。

以下是在 Vue 3 中使用 vue-content-loader 实现骨架屏效果的步骤:

3.3.1.1 安装和导入 vue-content-loader

在终端中使用 npm 安装 vue-content-loader

npm install vue-content-loader

然后在需要使用的组件中导入 SkeletonLoader 组件:

import { SkeletonLoader } from 'vue-content-loader';

3.3.1.2 创建骨架屏模板

在模板中使用 SkeletonLoader 组件,并通过 type 属性指定要使用的 SVG 形状。例如,要使用矩形形状可以这样写:

javascript 复制代码
<template>
  <div>
    <SkeletonLoader :width="300" :height="200" type="rect" />
  </div>
</template>

3.3.1.3 自定义骨架屏模板

可以通过 vue-content-loader 提供的属性来自定义骨架屏模板的颜色、大小、动画等。例如,要改变矩形形状的颜色和大小可以这样写:

javascript 复制代码
<template>
  <div>
    <SkeletonLoader :width="300" :height="200" type="rect" :rect="{ rx: 5, ry: 5 }" :speed="1" :primaryColor="'#f3f3f3'" :secondaryColor="'#ecebeb'" />
  </div>
</template>

在上面的代码中,我们通过 rect 属性设置了矩形的圆角半径,通过 speed 属性设置了动画速度,通过 primaryColorsecondaryColor 属性设置了骨架屏的颜色。
以上就是在 Vue 3 中使用 vue-content-loader实现骨架屏效果的基本步骤。需要注意的是,vue-content-loader 组件库提供了多种预定义的 SVG 形状,你可以根据需求选择合适的形状,并通过属性来自定义骨架屏的样式和动画。

3.3.2 使用 vue-skeleton-webpack-plugin 实现骨架屏的示例

vue-skeleton-webpack-plugin 是一个 Webpack 插件,可以帮助我们在打包过程中生成骨架屏模板,并自动注入到 HTML 文件中。

以下是使用 vue-skeleton-webpack-plugin 实现骨架屏的示例:

3.3.2.1 安装和配置 vue-skeleton-webpack-plugin

在终端中使用 npm 安装 vue-skeleton-webpack-plugin

npm install vue-skeleton-webpack-plugin

然后在 Vue 项目的 vue.config.js 文件中添加以下配置:

javascript 复制代码
const VueSkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new VueSkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: './src/skeleton.js' // 指定骨架屏入口文件
          }
        },
        insertAfter: '<div id="app"></div>', // 骨架屏注入位置
        minimize: true,
        quiet: true
      })
    ]
  }
};

在上面的示例中,我们指定了骨架屏的入口文件为 ./src/skeleton.js,并通过 insertAfter 属性指定了注入位置。

3.3.2.2 创建骨架屏模板

在项目中创建骨架屏模板,可以使用 vue-content-loader 或其他骨架屏工具来生成模板。

例如,创建了一个 Skeleton.vue 组件来定义骨架屏模板:

javascript 复制代码
<template>
  <div>
    <SkeletonLoader :width="300" :height="200" type="rect" :rect="{ rx: 5, ry: 5 }" :speed="1" :primaryColor="'#f3f3f3'" :secondaryColor="'#ecebeb'" />
  </div>
</template>

<script>
import { SkeletonLoader } from 'vue-content-loader';

export default {
  name: 'Skeleton',
  components: {
    SkeletonLoader
  }
};
</script>

3.3.2.3 创建骨架屏入口文件

在项目中创建骨架屏入口文件 skeleton.js,用于生成骨架屏模板。

例如,在 skeleton.js 中创建了一个 Vue 实例,使用 Skeleton 组件作为根组件:

javascript 复制代码
import Vue from 'vue';
import Skeleton from './components/Skeleton.vue';

new Vue({
  render: h => h(Skeleton)
}).$mount('#app');

在上面的代码中,通过 render 函数将 Skeleton 组件渲染到 DOM 中的 #app 元素上。

3.3.2.4 注入骨架屏模板到 HTML 文件中

在 HTML 文件中,使用 vue-skeleton-webpack-plugin 提供的 Skeleton 标签来注入骨架屏模板。

例如,在 public/index.html 文件中添加以下代码:

html 复制代码
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My App</title>
</head>

<body>
  <Skeleton></Skeleton>
  <div id="app"></div>
</body>

</html>

在上面的代码中,我们在 Skeleton 标签中注入了骨架屏模板,并将真实内容放在 app 标签中。

3.3.2.5 打包项目并查看效果

在终端中运行以下命令打包项目:

npm run build

打包完成后,打开生成的 index.html 文件,即可看到骨架屏效果。在加载真实内容之前,页面会显示骨架屏模板,提升用户体验。

3.4 代码优化

在代码优化时,需要综合考虑多个方面,包括性能、可读性、可维护性等。

下面是一些常见的代码优化方式及其结果问题:

  1. 懒加载/按需加载
  2. 缓存机制
  3. 代码压缩和合并
  4. 其他优化方式

3.4.1 懒加载/按需加载

懒加载/按需加载是指将页面或模块的加载推迟到需要时再进行,以减少初始加载时间和网络请求次数,提高页面性能。然而,在使用懒加载/按需加载时,可能会出现以下问题:

  • 首次加载时,用户可能需要等待更长时间才能看到页面内容。
  • 如果按需加载的模块过多,可能会出现过多的网络请求,导致页面加载速度变慢。
  • 懒加载/按需加载的代码可能会增加复杂度,降低代码的可读性和可维护性。

3.4.2 缓存机制

缓存机制是指将一些静态资源(如图片、CSS、JS 等)缓存在客户端,以减少网络请求次数,提高页面性能。然而,在使用缓存机制时,可能会出现以下问题:

  • 如果缓存时间过长,可能会导致用户无法看到最新的内容。
  • 如果缓存时间过短,可能会导致用户频繁地重新请求资源,降低页面性能。
  • 缓存机制可能会对服务器和客户端产生额外的负担,增加服务器和客户端的开销。

3.4.3 代码压缩和合并

代码压缩和合并是指将多个 JS 或 CSS 文件压缩为一个文件,并将其中的空格、注释等无关字符删除,以减小文件大小,提高页面性能。然而,在使用代码压缩和合并时,可能会出现以下问题:

  • 如果压缩和合并的文件过大,可能会导致文件下载时间过长,影响页面性能。
  • 代码压缩和合并可能会增加复杂度,降低代码的可读性和可维护性。
  • 如果压缩和合并的文件不够灵活,可能会导致无法对不同的页面进行定制和优化。

3.4.4 其他优化方式

除了上述方式外,还有一些其他的代码优化方式,如使用更高效的算法或数据结构、减少重绘和回流、优化图片大小和格式等。这些优化方式的效果和问题也各不相同,需要根据具体情况进行选择和评估。

综上所述,代码优化需要综合考虑多个方面,不能只追求性能,还要注意代码的可读性和可维护性,以确保代码质量和用户体验的均衡。

3.4.5 示例

下面是一个代码优化前后的示例对比:

假设有一个需求,需要在页面上显示一组商品列表,每个商品包含图片、标题、描述、价格等信息。

可以使用 Vue.js 来实现该需求,如下所示:

javascript 复制代码
<template>
  <div>
    <h2>商品列表</h2>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <img :src="item.image" :alt="item.title">
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
        <span>¥{{ item.price }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    fetch('https://api.example.com/products')
      .then(response => response.json())
      .then(data => {
        this.items = data;
      });
  }
};
</script>

在上面的代码中,使用了 Vue.js 的模板语法来创建商品列表,并通过 fetch 方法从后端 API 获取商品数据。

然而,在实际应用中,该代码存在一些性能问题,可以进行优化。
下面是一个针对该代码的优化方案:

javascript 复制代码
<template>
  <div>
    <h2>商品列表</h2>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <img :src="item.image" :alt="item.title">
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
        <span>¥{{ item.price }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      loading: true
    };
  },
  async created() {
    try {
      const response = await axios.get('https://api.example.com/products');
      this.items = response.data;
    } catch (error) {
      console.error(error);
    } finally {
      this.loading = false;
    }
  }
};
</script>

在上面的优化方案中,使用了以下优化方式:

  1. 使用 axios 替换 fetch,以提高网络请求的稳定性和可读性。
  2. created 钩子函数改为异步函数,并使用 async/await 语法简化异步代码,以提高代码可读性。
  3. 添加 loading 变量,用于在数据加载完成前显示加载动画,以提高用户体验。

通过以上优化,可以提高代码的性能、可读性和可维护性,从而提高应用的质量和用户体验。

3.5 如何设置浏览器缓存策略以提高页面加载速度?

设置浏览器缓存策略可以减少浏览器重复请求资源,从而提高页面加载速度。可以通过在 HTTP 响应头中设置缓存策略来实现。
以下是一些常见的缓存策略设置方法:

  1. 设置强缓存
  2. 设置协商缓存

3.5.1 设置强缓存

强缓存是指浏览器在一定时间内直接从本地缓存中获取资源,而不需要向服务器发送请求。可以通过设置 "Expires" 或者 "Cache-Control" 响应头来设置强缓存时间,如下所示:

  • Expires:设置过期时间,例如 "Expires: Wed, 21 Oct 2023 07:28:00 GMT"
  • Cache-Control:设置缓存策略,例如 "Cache-Control: max-age=3600",表示资源在 3600 秒内有效。

3.5.2 设置协商缓存

协商缓存是指浏览器在过期时间后,向服务器发送请求,服务器会根据资源的 ETag 或者 Last-Modified 等信息,判断资源是否发生变化。如果资源没有发生变化,服务器会返回 304 状态码,告诉浏览器可以直接使用本地缓存。可以通过设置 "Last-Modified" 和 "ETag" 响应头来设置协商缓存,如下所示:

  • Last-Modified:表示资源的最后修改时间,例如 "Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT"
  • ETag:表示资源的唯一标识符,例如 "ETag: W/1234567890"

注意,设置缓存策略时需要根据具体情况进行设置,过长的缓存时间可能会导致资源更新不及时,而过短的缓存时间则可能会影响页面加载速度。建议根据实际情况进行调整。

相关推荐
m0_748240251 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar1 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人1 小时前
前端知识补充—CSS
前端·css
GISer_Jing2 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245522 小时前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v2 小时前
webpack最基础的配置
前端·webpack·node.js
pubuzhixing2 小时前
开源白板新方案:Plait 同时支持 Angular 和 React 啦!
前端·开源·github
2401_857600952 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600952 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL2 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js