背景:

在项目中前端使用vue开发,都是使用vue脚手架工具,其webpack配置文件已经将大部分性能优化了,比如代码压缩,图片base64转换,代码分离等。这些我们统统不需要去管。但使用vue时,其实还是有些细节点可以优化的,以下为开发过程中的一些前端性能优化的总结点。

内容:

1.在vue中v-for和v-if不要放在同一个元素上使用。由于 v-for 和 v-if 放在同一个元素上使用会带来一些性能上的影响,官方给出的建议是在计算属性上过滤之后再进行遍历。所以平时开发不推荐一起使用vue官网(https://cn.vuejs.org/v2/style...。如下:

clipboard.png

2、在同一个页面中如果不需要立刻展示的组件,可以使用动态组件(动态组件主页面加载是不会加载,等到触发条件时才加载该组件,并且加载一次后就有缓存)。比如一个页面有添加页面,这个添加页面一般我们会提取出为组件,这个时候组件使用动态组件来加载可以优化性能,提高主页面的加载速度。动态组件加载方式为:

clipboard.png

3、路由懒加载模式,与组件的动态加载类似vue路由懒加载(https://router.vuejs.org/zh/g...)。如下:

clipboard.png

4、对于前端纯大数据展示(纯大数据指:拿到数据就是直接用于展示的,不需要做修改其中字段等处理的,而且数据量比较大)的情况下,使用Object.freeze方法来包裹变量,那边vue内部不会使用defineproperty去监听数据内部的变化,只有本身变化时才会触发,在大量数据的情况下,vue内部不在去监听数据的变化会提高性能。使用demo如下:

clipboard.png

5、Keep-alive,vue提供了keep-alive标签来存储缓存,对于一些视频控件object或图表类的使用,我们经常会使用v-if指令,而v-if是会创建和销毁的,如果频繁操作在ie下的内存会持续上升,而keep-alive可以有效的缓存,抑制内存的持续上升vue-keep-alive(https://cn.vuejs.org/v2/api/#...)。使用方式为

![图片上传中...]

6、Es6集合Set()可优化遍历速度,set集合是可用于查找该集合内是否存在某个元素。这种维度可有效的提高遍历效率。使用场景判断当一个数组中的元素是否在已选集合内

vue前端开发性能的可优化点-脚本宝典
clipboard.png

7、scope中元素选择器尽量少用。在 scoped 样式中,类选择器比元素选择器更好,因为大量使用元素选择器是很慢的。
为了给样式设置作用域,Vue 会为元素添加一个独一无二的特性,例如 data-v-f3f3eg9。然后修改选择器,使得在匹配选择器的元素中,只有带这个特性才会真正生效 (比如 button[data-v-f3f3eg9])。

问题在于大量的元素和特性组合的选择器 (比如 button[data-v-f3f3eg9]) 会比类和特性组合的选择器 慢,所以应该尽可能选用类选择器。
https://cn.vuejs.org/v2/style...

如果对您有帮助请点个赞,谢谢!

本文固定链接: http://www.js-code.com/vue-js/vue-js_26237.html