最全 Vue 性能优化方案

这篇具有很好参考价值的文章主要介绍了最全 Vue 性能优化方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最全 Vue 性能优化方案

当涉及到 Vue 应用的性能优化时,有许多技术和策略可以帮助提升应用的性能并改善用户体验。以下总结了常用的十种 Vue 的性能优化方案:

一、尽可能使用 v-show 替换 v-if

因为 v-show 本质上是通过 css 控制元素的显示与隐藏,而 v-if 是通过操作 dom 来控制元素的显示与隐藏,频繁操作 dom 会导致性能有所影响

二、使用 v-for 必须添加 key

在删除数据时,由于没有绑定 key,不确定删除的是哪个,就会把整个虚拟 dom 重新渲染,这样对性能不太友好。

但如果设置了 key,比如 k 的值为 x,那么在删除数据时候只会把 domx 的数据删掉,并不会重新渲染整个 dom。这样一来对性能有很大的提高

三、避免 v-for 与 v-if 一起使用

v-forv-if 结合使用时,Vue 需要在每次渲染时都重新计算列表中每个元素是否满足 v-if 的条件,这会导致不必要的性能开销。

如果将 v-if 放在父元素上时,v-for 会在每次重新渲染时都完整遍历整个列表,判断每个元素是否满足条件。这样也会导致性能下降,尤其在列表较大时更为明显。

为了避免这种性能问题,推荐的做法是将 v-if 放在包裹在元素内部,而不是包裹在元素上,这样可以减少不必要的遍历次数,提升性能。

<div v-for="item in data" :key="item.id">
  <div v-if="item.condition">
    <!-- 具体元素内容 -->
  </div>
</div>

四、合理使用 watch 和 computed

watch 适用于执行异步或开销较大的操作,或者需要对数据变化作出特定响应的场景。

computed 用于根据已有的响应式数据计算出一个新的值,它会根据相关的响应式数据进行缓存,只在相关响应式数据改变时进行重新计算。这样可以避免不必要的重复计算,提高性能。

简单来说: 使用 watch 监听数据变化,适合处理复杂操作或需要特定响应的情况;使用 computed 计算属性,可以根据已有数据计算新值并自动缓存,提高性能。合理使用这两个功能可以让代码更易读和更高效。

组件缓存
组件缓存是指将组件的状态缓存起来,当组件再次被渲染时,可以直接使用缓存的状态,而不需要重新渲染组件。

组件缓存的优势在于减少了组件的渲染次数,从而降低了开销。它对于包含大量静态内容的组件,如轮播图、静态文章等组件的性能优化特别有效。因为这些组件的内容往往不会随着数据变化而发生改变,使用组件缓存可以将组件的渲染次数降至最低。

五、使用路由懒加载

{
    path: '/login',
    component: () => import('@/views/login/index'),
}
  1. 减轻初始加载: 通过路由懒加载,只有在使用到对应的页面时才会加载相关的代码。这样可以减少初始加载的代码量,提升网页的加载速度,特别是在应用有很多页面的情况下效果更为明显。
  2. 提升页面加载速度: 当用户访问某个具体的页面时,只需要加载该页面所需的代码,而不是一次性加载所有页面的代码。这样可以减少请求的网络带宽和内存占用,提升页面加载速度,给用户更好的体验。
  3. 优化资源利用: 路由懒加载可以将应用划分为多个独立的模块,每个模块可以按需加载,提高代码的复用性和可维护性。同时,由于只加载当前需要的模块,可以更好地控制资源的使用,避免一次性加载过多的资源。

简单来说: 路由懒加载可以让网站加载更快,提高用户体验,同时也更好地利用资源、提高代码可维护性。

使用懒加载
使用懒加载可以优化同一时间减少 http 请求开销。
比如页面加载时让他先加载部分数据,等用户点击下一页或下拉之后再加载另一部分数据

六、引入网络资源

可以将静态资源放在第三方 CDN 服务器上,比如 cssjs、图片、视频、字体等

这样做有以下好处:

  1. 提高页面加载速度
  2. 减少项目打包之后的体积
  3. 利用浏览器缓存,不变动的文件长期缓存

七、尽可能使用按需导入

在项目中尽可能避免 * 导入全部而是使用按需导入,否则就会导入很多我们用不到的东西从而影响项目打包的体积大小以及页面加载速度。

八、icon 使用精灵图

默认情况下页面中有几张图片就会发起几次请求,所以我们可以将图片全部合成在一张图中,然后通过操作 CSSbackground 属性,控制背景的位置以及大小,来展示需要的部分。这样可以减少 HTTP 请求压力

九、销毁资源

使用完某些代码后一定要销毁资源,比如定时器。一般在 beforeDestroy 中销毁。这样可以避免资源浪费以及内存泄露

十、使用节流防抖

节流:在一定时间间隔内只执行一次函数

function throttle(func, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

防抖:在一定时间内不能被再次触发

function debounce(func, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

使用

function onScroll() {
  console.log("Scroll event");
}

// 使用节流函数
const throttledScroll = throttle(onScroll, 200);
window.addEventListener("scroll", throttledScroll);

// 使用防抖函数
const debouncedScroll = debounce(onScroll, 200);
window.addEventListener("scroll", debouncedScroll);

这两种技术可以在事件处理、滚动加载、搜索框输入等场景下有效地减少不必要的计算和操作,提升页面性能和用户体验。文章来源地址https://www.toymoban.com/news/detail-856926.html

到了这里,关于最全 Vue 性能优化方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 极致性能优化:前端SSR渲染利器Qwik.js

    前端性能已成为网站和应用成功的关键要素之一。用户期望快速加载的页面和流畅的交互,而前端框架的选择对于实现这些目标至关重要。然而,传统的前端框架在某些情况下可能面临性能挑战且存在技术壁垒。 在这个充满挑战的背景下,我们引入了 Qwik.js 框架。Qwik.js 不仅

    2024年02月05日
    浏览(67)
  • 前端项目部署自动检测更新后通知用户刷新页面(前端实现,技术框架vue、js、webpack)——方案一:编译项目时动态生成一个记录版本号的文件

    当我们重新部署前端项目的时候,如果用户一直停留在页面上并未刷新使用,会存在功能使用差异性的问题,因此,当前端部署项目后,需要提醒用户有去重新加载页面。 vue、js、webpack 编译项目时动态生成一个记录版本号的文件 轮询(20s、自己设定时间)这个文件,判断版

    2024年02月02日
    浏览(64)
  • 【前端八股文】浏览器系列:性能优化——HTML、CSS、JS、渲染优化

    本系列目录:【前端八股文】目录总结 是以《代码随想录》八股文为主的笔记。详情参考在文末。 代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主 性能优化,从以下几个方面来进行。 避免HTML中直接写CSS viewport加速页面渲染 使用语义化标签 减少标签的

    2023年04月20日
    浏览(61)
  • 极致性能优化:前端SSR渲染利器Qwik.js | 京东云技术团队

    前端性能已成为网站和应用成功的关键要素之一。用户期望快速加载的页面和流畅的交互,而前端框架的选择对于实现这些目标至关重要。然而,传统的前端框架在某些情况下可能面临性能挑战且存在技术壁垒。 在这个充满挑战的背景下,我们引入了 Qwik.js 框架。Qwik.js 不仅

    2024年02月05日
    浏览(46)
  • 快速搞定前端JS面试 -- 第十二章 运行环境 (页面加载、性能优化、安全)

    4. Window.onload和DOMContentLoaded 二、性能优化 1、性能优化原则 2、如何入手性能优化 1. 资源合并 2. 缓存 3. CDN 4. SSR 5. 懒加载 6. 缓存DOM查询 7. 尽早开始JS执行 8. 防抖 9. 节流 三、安全 1. XSS跨站请求攻击 2. XSRF跨站请求伪造 问题解答 1. 从输入url到显示出页面的整个过程 2.

    2024年04月16日
    浏览(54)
  • 快速搞定前端JS面试 -- 第十二章 运行环境 (页面加载、性能优化、安全)(1)

    4. SSR 5. 懒加载 6. 缓存DOM查询 7. 尽早开始JS执行 8. 防抖 9. 节流 三、安全 1. XSS跨站请求攻击 2. XSRF跨站请求伪造 问题解答 1. 从输入url到显示出页面的整个过程 2. Window.onload和DOMContentLoaded区别 3. 为何把css放在中 4. 为何把js放在最后 5. html中css写在前js写在后的优点 6. 如何入

    2024年04月14日
    浏览(47)
  • 性能优化之--- 项目打包优化(vue)

    项目体积小也是优化性能的一个方向,这里以 Vue 工程为例; 当刚运行项目的时候,发现刚进入页面,就将所有的js文件和css文件加载了进来,这一进程十分的消耗时间。 如果打开哪个页面就对应的加载响应页面的js文件和css文件,那么页面加载速度会大大提升。 vue官方文档

    2024年02月09日
    浏览(48)
  • vue - 常见的性能优化

    1, v-for 遍历避免同时使用 v-if 在 Vue2 中 v-for 优先级更高,所以编译过程中会把列表元素全部遍历生成虚拟 DOM,再来通过 v-if 判断符合条件的才渲染,就会有多余的逻辑判断和造成性能的浪费,因为我们希望的是不符合条件的虚拟 DOM都不要生成; 1,为了过滤一个列表中的项

    2024年02月16日
    浏览(47)
  • 【 Vue3 性能优化】页面加载性能 与 更新性能

    Vue 在大多数常见场景下性能都是很优秀的,通常不需要手动优化。然而,总会有一些具有挑战性的场景需要进行针对性的微调。 数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus教程 权限系统-商城 个人博客地址 Web 性能优化主要有两个方面: 页面加载性能 首次访问时,应

    2024年02月14日
    浏览(45)
  • Vue 项目性能优化 — 实践指南

    Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,

    2024年02月11日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包