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 相关文章推荐
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
es6函数中的作用域实例分析
Apr 18 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
Python实现多线程的两种方式分析
2018/08/29 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
pymysql的简单封装代码实例
2020/01/08 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
phpquery中文手册
2021/03/18 PHP
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
春游踏青活动方案
2014/08/14 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
升职自荐信范文
2015/03/27 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
导师鉴定意见
2015/06/05 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
教你一步步实现一个简易promise
2021/11/02 Javascript
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏