VUE解决图片视频加载缓慢/首屏加载白屏的问题
作者:西门吹雪~
1 问题描述
在 Vue3 项目中,有时候会出现图片视频加载缓慢、首屏加载白屏的问题
2 原因分析
通常是由以下原因导致的:
图片或视频格式不当:如果图片或视频格式选择不当,比如选择了无损压缩格式,可能会导致文件大小过大,从而影响加载速度。
页面中同时加载了大量的图片和视频,导致请求次数过多,网络传输速度受限,从而影响页面加载速度。
页面中的图片和视频没有进行优化处理,比如没有进行压缩、没有使用 CDN 加速等。
页面的 HTML、CSS、JavaScript 代码没有进行优化,比如没有使用 webpack 进行打包、没有使用代码分割技术等,导致页面加载时间过长。
页面中的图片和视频没有使用懒加载技术,导致页面一次性加载过多的资源,从而导致页面加载速度变慢。
网络状况不佳,比如网络延迟、带宽受限等,都可能导致图片和视频加载缓慢。
服务器响应时间过长:如果服务器响应时间过长,会导致页面请求资源的时间变慢,从而影响页面加载速度。
使用了不稳定的第三方库:如果使用了不稳定的第三方库或者组件,可能会导致页面加载速度变慢。
浏览器缓存策略不当:如果浏览器缓存策略设置不当,可能会导致浏览器重复请求资源,从而影响页面加载速度。
网络安全策略较为严格:如果网络安全策略较为严格,可能会导致浏览器请求资源时遇到一些限制,从而影响页面加载速度。
因此,在开发 Vue3 项目时,需要注意对图片和视频进行优化处理,减少请求次数,使用懒加载技术,优化代码等,来提升页面加载速度,避免出现加载缓慢、首屏加载白屏的问题。
3 解决方案
图片和视频加载缓慢、导致首屏加载白屏的问题,通常可以从以下几个方面入手来解决:
- 图片和视频的优化
- 懒加载
- 骨架屏
- 代码优化
3.1 图片和视频的优化
可以通过图片压缩、视频压缩等技术来减小文件大小,从而提高加载速度。同时,还可以通过 CDN 加速来加快资源加载速度。
可以从以下几个方法入手:
- 压缩图片或视频
- 选择合适的图片或视频格式
- 使用图片或视频 CDN 加速
- 使用懒加载技术
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() { // 初始化 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 形状。例如,要使用矩形形状可以这样写:
<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 代码优化
在代码优化时,需要综合考虑多个方面,包括性能、可读性、可维护性等。
下面是一些常见的代码优化方式及其结果问题:
- 懒加载/按需加载
- 缓存机制
- 代码压缩和合并
- 其他优化方式
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>
在上面的优化方案中,使用了以下优化方式:
- 使用
axios
替换fetch
,以提高网络请求的稳定性和可读性。- 将
created
钩子函数改为异步函数,并使用async/await
语法简化异步代码,以提高代码可读性。- 添加
loading
变量,用于在数据加载完成前显示加载动画,以提高用户体验。通过以上优化,可以提高代码的性能、可读性和可维护性,从而提高应用的质量和用户体验。
3.5 如何设置浏览器缓存策略以提高页面加载速度?
设置浏览器缓存策略可以减少浏览器重复请求资源,从而提高页面加载速度。可以通过在 HTTP 响应头中设置缓存策略来实现。
以下是一些常见的缓存策略设置方法:
- 设置强缓存
- 设置协商缓存
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"
注意,设置缓存策略时需要根据具体情况进行设置,过长的缓存时间可能会导致资源更新不及时,而过短的缓存时间则可能会影响页面加载速度。建议根据实际情况进行调整。
以上就是VUE解决图片视频加载缓慢/首屏加载白屏的问题的详细内容,更多关于VUE图片视频加载缓慢/首屏加载白屏的资料请关注脚本之家其它相关文章!