Vue性能优化的方法

所属分类: 网络编程 / JavaScript 阅读数: 745
收藏 0 赞 0 分享

今天来谈一谈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判断查询日期是否为有效日期

很多网站都涉及到输入日期选项,如果客户日期输入错误,可能导入查询不到甚至查询到错误的信息,为了更好的满足用户需求,需要对日期进行校验,下面给大家介绍使用纯javascript如何判断查询日期是否为有效日期,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery实现的蓝色二级导航条效果代码

这篇文章主要介绍了jquery实现的蓝色二级导航条效果代码,涉及jquery鼠标事件及页面样式的动态切换效果实现技巧,非常简单实用,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax如何实现页面局部跳转与结果返回

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,本篇文章给大家介绍ajax如何实现页面局部跳转与结果返
收藏 0 赞 0 分享

jQuery实现的类似淘宝网站搜索框样式代码分享

这篇文章主要介绍了类似淘宝网站搜索框样式实现代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

js实现的黑背景灰色二级导航菜单效果代码

这篇文章主要介绍了js实现的黑背景灰色二级导航菜单效果代码,涉及javascript操作页面元素动态切换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery仿360导航页图标拖动排序效果代码分享

这篇文章主要为大家详细介绍了360导航页图标拖动排序效果代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript中SetInterval与setTimeout的定时器用法

Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等,本文文章通过代码示例给大家介绍javascript中SetInterval与setT
收藏 0 赞 0 分享

jquery带下拉菜单和焦点图代码分享

这篇文章主要介绍了jquery带下拉菜单和焦点图代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

jQuery实现的背景动态变化导航菜单效果

这篇文章主要介绍了jQuery实现的背景动态变化导航菜单效果,涉及jquery页面元素背景动态变换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery+CSS实现的水平布局多级网页菜单效果

这篇文章主要介绍了jquery+CSS实现的水平布局多级网页菜单效果,涉及jquery页面元素属性动态变换效果实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多