Vue性能优化的方法


Posted in Javascript onJuly 30, 2020

今天来谈一谈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性能优化的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 #Javascript
Vue props中Object和Array设置默认值操作
Jul 30 #Javascript
vue prop传值类型检验方式
Jul 30 #Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 #Javascript
vue setInterval 定时器失效的解决方式
Jul 30 #Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 #Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 #Javascript
You might like
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
JavaScript面象对象设计
2008/04/28 Javascript
jquery之Document元素选择器篇
2008/08/14 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
Javascript Objects详解
2014/09/04 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
浅谈Python的文件类型
2016/05/30 Python
python3调用R的示例代码
2018/02/23 Python
Django中的ajax请求
2018/10/19 Python
python实现flappy bird游戏
2018/12/24 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
安全保证书范文
2014/04/29 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
大学生党员自我评价
2015/03/04 职场文书