【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（tinypng.com）

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

• Compressor.io（compressor.io）

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

• Kraken（kraken.io）

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

• ImageOptim（imageoptim.com）

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：

<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 库：

<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() {// 初始化 LazyLoadconst 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 形状。例如，要使用矩形形状可以这样写：

<template><div><SkeletonLoader :width="300" :height="200" type="rect" /></div>
</template>

3.3.1.3 自定义骨架屏模板

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

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

在上面的代码中，我们通过 rect 属性设置了矩形的圆角半径，通过 speed 属性设置了动画速度，通过 primaryColor 和 secondaryColor 属性设置了骨架屏的颜色。

以上就是在 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 文件中添加以下配置：

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 组件来定义骨架屏模板：

<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 组件作为根组件：

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 文件中添加以下代码：

<!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 来实现该需求，如下所示：

<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 获取商品数据。

然而，在实际应用中，该代码存在一些性能问题，可以进行优化。

下面是一个针对该代码的优化方案：

<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"

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