Vue性能优化的方法

今天来谈一谈Vue中一些性能优化的问题，仅仅是个人使用中的一些小心得，来，今天我一句废话不多说，直接上内容好吧

　　1.v-if和v-show的使用，

　　　　我们都知道这两个都可以控制显隐，那我们用哪个呢，个人觉得要从两个方面入手来确定使用哪个，

　　　　1.权限的问题，只要涉及到权限相关的展示用v-if比较好

　　　　2.切换地频率，如果频繁的切换我们用v-show，不频繁的切换用v-if

　　其实两者各有优缺，就看你是怎么选择了，用v-if能减少页面中的DOM总数，加快渲染的速度，而且我们要清楚一个事情

　　v-if是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.

　　v-if也是惰性的,如果在初始渲染时条件为假,那么什么都不做- - 直到条件第一次为真的时候才会开始渲染条件块,相比之下,v-show

　　就简单得多- - 不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换.

　　2.使用动画时可以用CSS启动硬件加速，

　　　　CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行,那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发 的CSS规则，可以用transform: translateZ(0); 来开启硬件加速，transform: translate3d(0, 0, 0)也可以。

　　3.组件懒加载，

　　　　这个很有用的，例如，当我们在一个很长的页面时，用户可能只会去看前一两屏，那剩下没被用用户观看的组件也会被加载，这样就会浪费我们的资源，我们使用组件懒加载在阻止性能浪费

　　4.为item设置唯一key值，

　　　　方便Vuex的内部机制在循环时能够准确的找到该条列表数据

　　5.减少watch的数据，在有可能的前提下，减少没有必要的state数据

　　　　因为当watch的数据比较大的时候，会大量消耗性能，所以我们可以使用事件中央总线或者Vuex进行数据的变更操作

　　　　为什么要减少没有必要的state数据，这和Vue的响应式原理有关，Vue会使用 Object.defineProperty 把这些属性全部转为 getter/setter ,并建立相应的Watcher来监控，这就造成一个问题，当我们的state特别多时，对应的Watcher也就会特别多，容易造成卡顿，这也是为什么在大型项目（状态特别多）我们会选用React而不用Vue的原因

　　6.图片按需加载，这个算是基础操作了吧

　　7.SSR（服务端渲染）

　　　　如果项目比较大，首屏无论怎么做优化，都出现闪屏或者一阵黑屏的情况。可以考虑使用SSR(服务端渲染)

　　8.骨架屏加载

　　　　在页面加载资源较多，可能会出现白屏和闪屏的情况，体验不好，这个时候我们可以使用骨架屏

　　　　（骨架屏就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉）

　　9.打包时的优化

　　　　有时候我们打完包之后发现包会很大，那怎么解决这个问题呢，其实很简单，在项目中，我们不是引入了诸如axios，vuex，vue-router等的包吗，那我们将这些包剔除出去，

　　　　换用cdn直接引入到我们项目的根目录的html当中，

　　　　注意在 webpack 里有个 externals配置，可以忽略不需要打包的库

目前的总结的就是这些，如果以后想起来还有别的，我会再回来添加的，在下告辞，不用想我，我去用个早膳，一会就回来好吧

以上就是Vue性能优化的方法的详细内容，更多关于Vue性能优化的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • mpvue性能优化实战技巧(小结)

    最近一直在折腾mpvue写的微信小程序的性能优化,分享下实战的过程. 先上个优化前后的图: 可以看到打包后的代码量从813KB减少到387KB,Audits体验评分从B到A,效果还是比较明显的.其实这个指标说明不了什么,而且轻易就可以做到,更重要的是优化小程序运行过程中的卡顿感,请耐心往下看. 常规优化 常规的Web端优化方法在小程序中也是适用的,而且不可忽视. 一.压缩图片 这一步最简单,但是容易被忽视.在tiny上在线压缩,然后下载替换即可. 我这项目的压缩率高达72%,可以说打包后的代码从

  • 加速vue组件渲染之性能优化

    背景 平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下: export default { data(){ return { tableTitle:[ { label:'省份', prop:'prop' }, { label:'城市', prop:'prop' }, { label:'汇总', prop:'prop', colconfig:[ { label:'下级', prop:'prop'

  • vue短信验证性能优化如何写入localstorage中

    平时我们在项目中进行注册等的时候,会经常用到短信验证的功能,但是现在现在很多短信验证都是存在下面几个问题,例如短信验证时间为60s的时候, 1. 当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击 2.当点击按钮倒计时开始,例如在50s的时候我关闭了浏览器,过了5s后,我在打开,此时时间倒计时的时间应该是45s左右,但是当重新打开浏览器的时候,按钮又可以重新点击了 为了解决上面的两个问题,就需要把时间都写到localstorage里面去,当打开页面的时候,就去loca

  • 浅谈Vue 性能优化之深挖数组

    背景 最近在用 Vue 重构一个历史项目,一个考试系统,题目量很大,所以核心组件的性能成为了关注点.先来两张图看下最核心的组件 Paper 的样式. 从图中来看,分为答题区与选择面板区. 稍微对交互逻辑进行下拆解: 答题模式与学习模式可以相互切换,控制正确答案显隐. 单选与判断题直接点击就记录答案正确性,多选是选择答案之后点击确定才能记录正确性. 选择面板则是记录做过的题目的情况,分为六种状态(未做过的,未做过且当前选择的,做错的,做错的且当前选择的,做对的,做对的且当前选择的),用不同的样式去

  • 使用异步组件优化Vue应用程序的性能

    单页应用其一个问题是首屏屏渲染速度较慢.这是因为页面首次加载时服务器将向客户端发送大量JavaScript,在屏幕上显示任何内容之前必须下载并解析.可以想象,随着应用程序规模的扩大,这个问题对用户体验的影响也会越来越突出. 现在幸运的是,当使用Vue CLI构建Vue应用程序时(使用webpack),可以采取一些措施来抵消这种情况.在本文中,我将演示如何在应用程序的初始渲染之后使用 异步组件 和webpack的代码分割功能加载到页面的某些部分.这将使初始加载时间降至最低,并为您的应用程序提供更好

  • 优化Vue中date format的性能详解

    优化Vue中date format的性能详解

    在很多项目中,都需要将长整型的日期格式转换成其他的日期格式,而在Vue中,我们可以利用自定义相应的 filter 过滤器来进行 date format 的功能.如果直接引入 moment 的方法,在利用 npm run build --report 时,会发现 moment.js 的文件相当大.显而易见,这么小的功能点却大大影响了项目的性能. 本文主要是利用 npm run build --report 来分析打包文件的大小,进而对 date format 的功能点进行优化. 自定义 'date

  • Cookbook组件形式：优化 Vue 组件的运行时性能

    Vue 2.0 在发布之初,就以其优秀的运行时性能著称,你可以通过这个第三方 benchmark来对比其他框架的性能.Vue 使用了 Virtual DOM 来进行视图渲染,当数据变化时,Vue 会对比前后两棵组件树,只将必要的更新同步到视图上. Vue 帮我们做了很多,但对于一些复杂场景,特别是大量的数据渲染,我们应当时刻关注应用的运行时性能. 本文仿照Vue Cookbook组织形式,对优化 Vue 组件的运行时性能进行阐述. 基本的示例 在下面的示例中,我们开发了一个树形控件,支持基本的树

  • Vue.js 无限滚动列表性能优化方案

    Vue.js 无限滚动列表性能优化方案

    问题 大家都知道,Web 页面修改 DOM 是开销较大的操作,相比其他操作要慢很多.这是为什么呢?因为每次 DOM 修改,浏览器往往需要重新计算元素布局,再重新渲染.也就是所谓的重排(reflow)和重绘(repaint).尤其是在页面包含大量元素和复杂布局的情况下,性能会受到影响.那对用户有什么实际的影响呢? 一个常见的场景是大数据量的列表渲染.通常表现为可无限滚动的无序列表或者表格,当数据很多时,页面会出现明显的滚动卡顿,严重影响了用户体验.怎么解决呢? 解决方案 既然问题的根源是 DOM

  • 浅谈Vue 初始化性能优化

    前言 一般来说,你不需要太关心vue的运行时性能,它在运行时非常快,但付出的代价是初始化时相对较慢.在最近开发的一个Hybrid APP里,Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms,这让我开始重视vue的初始化性能,并最终优化到200 ~ 300ms,这篇文章分享我的优化思路. 性能瓶颈在哪里? 先看一下常见的vue写法:在html里放一个app组件,app组件里又引用了其他的子组件,形成一棵以app为根节点的组件树. <body> <

  • Vue性能优化的方法

    今天来谈一谈Vue中一些性能优化的问题,仅仅是个人使用中的一些小心得,来,今天我一句废话不多说,直接上内容好吧 1.v-if和v-show的使用, 我们都知道这两个都可以控制显隐,那我们用哪个呢,个人觉得要从两个方面入手来确定使用哪个, 1.权限的问题,只要涉及到权限相关的展示用v-if比较好 2.切换地频率,如果频繁的切换我们用v-show,不频繁的切换用v-if 其实两者各有优缺,就看你是怎么选择了,用v-if能减少页面中的DOM总数,加快渲染的速度,而且我们要清楚一个事情 v-if是'真正

  • .NET使用Collections.Pooled提升性能优化的方法

    .NET使用Collections.Pooled提升性能优化的方法

    目录 简介 Collections.Pooled 如何使用 性能对比 PooledList<T> PooledDictionary<TKey, TValue> PooledSet<T> PooledStack<T> PooledQueue<T> 未手动释放场景 原理解析 总结 简介 性能优化就是如何在保证处理相同数量的请求情况下占用更少的资源,而这个资源一般就是CPU或者内存,当然还有操作系统IO句柄.网络流量.磁盘占用等等.但是绝大多数时候,我

  • 浅谈react性能优化的方法

    React性能优化思路 软件的性能优化思路就像生活中去看病,大致是这样的: 使用工具来分析性能瓶颈(找病根) 尝试使用优化技巧解决这些问题(服药) 使用工具测试性能是否确实有提升(疗效确认) 初识react只是为了尽快完成项目,后期进行代码审查时候发现有很多地方需要优化,因此做了个小结. Code Splitting shouldComponentUpdate避免重复渲染 使用不可突变数据结构 组件尽可能的进行拆分.解耦 列表类组件优化 bind函数优化 不要滥用props ReactDOMSe

  • angularjs性能优化的方法

    学习angularjs有一段时间了,但是一直都没有怎么考虑过性能方面的问题,上次在研究过滤器的时候涉及到了性能问题.所以自己也总结了下常用的性能优化. 优化$watch 1.及时移除不必要的watch var unWatch = $scope.$watch('', function() { // do something ... if (someCondition) { unWatch(); // 取消监听 } }); 2.尽量避免深度watch 我们都知道$watch有三个参数,第三个参数为t

  • JS性能优化实现方法及优点进行

    最近刚阅读完<高性能javascript>,想谈谈对js性能优化的看法.理解有些不同,可能还需要各位多多提醒. 话不多说,提到javascript难免会联想到文档对象模型(DOM),它作用于XML和HTML文档的程序接口(API),位于浏览器中,主要用来与HTML文档打交道.同样也用于Web程序中获取XML文档,并使用DOM API来访问文档中的数据.尽管DOM是个与语言无关的API,它在浏览器中的接口却是用javascript实现的.客户端脚本编程大多数时候是在和底层文档(underlyin

  • vue性能优化之cdn引入vue-Router的问题

    vue性能优化之cdn引入vue-Router的问题

    目录 cdn引入vue-Router问题 vue引入外部cdn报错 'XXX is not defined' 及事件处理 解决办法 cdn引入vue-Router问题 关于vue的性能优化,有一个非常重要的点,就是用cdn的方式引入vue.vue- router.ElementUI.vuex.axios.jquery,那么到底怎么引呢? 1.打开国内cdn服务网址: https://www.bootcdn.cn/ 2.查看你的项目 package.json ,查看你安装的是哪个版本 3.在cdn

  • 小程序多图列表实现性能优化的方法步骤

    写这篇文章的缘由: 最近在公司的小程序项目中遇到了页面图片元素过多导致的性能问题. 从小程序提供的性能检测面板分析, 确定是图片元素占用了过多内存导致. 因为本人之前主要是做桌面端应用开发和原生app开发, 没有太顾及过移动端图片的内存占用问题. 这次既然遇到了, 也就趁这个机会学习一下其优化的技巧. 什么造成的性能问题 简单的来说: DOM节点过多 && 图片节点过多 DOM节点过多会造成更多的内存占用. 按照目前的微信小程序限制, 内存占用500M以上会出现卡顿, 甚至闪退. 如果列表

  • 浅谈 Vue 项目优化的方法

    好久不写博文了,本文作为我使用半年 vue 框架的经验小结,随便谈谈,且本文只适用于 vue-cli 初始化的项目或依赖于 webpack 打包的项目. 前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题 基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style&

  • 50个PHP程序性能优化的方法

    1. 用单引号代替双引号来包含字符串,这样做会更快一些.因为 PHP 会在双引号包围的 字符串中搜寻变量,单引号则不会,注意:只有 echo 能这么做,它是一种可以把多个字符 串当作参数的"函数"(译注:PHP 手册中说 echo 是语言结构,不是真正的函数,故把函数 加上了双引号). 2.如果能将类的方法定义成 static,就尽量定义成 static,它的速度会提升将近 4 倍. 3.$row['id'] 的速度是$row[id]的 7 倍. 4.echo 比 print 快,并且

随机推荐