vue2 性能优化

从chromeF12工具栏中打开performance

v-once优化前从主页进入

优化一、所有静态html添加v-once

v-once优化后从主页进入

可以看到加载和渲染稍快了一点(other 表示 网络)
但是v-once是缓存机制 所以用户首次进入无效 但是能大大提高路由切换时的效率

优化二、使用v-pre

v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

然鹅并没有多少不需要编译的元素

优化三、删除不必要的HTTP请求
发现早期遗留的现在不在项目中使用两个http请求
占用非常多的带宽 果断删除

network优化.png
network优化1.png
network优化后

loading 加快了呢

优化四、删除历史遗留代码
早期没有很好的代码review 现在项目里一大堆垃圾代码 现在清理一下

然鹅并没有什么卵用

优化五、优化代码结构
1、一行的函数放到虚拟dom中执行
method:{ // 只有一行代码 不需要放入method中 删掉 focusInput () { this.$refs.lengthInput.focus() } } // 放到虚拟dom中 <span @click=$refs.lengthInput.focus()>{{carInfo.mileage}} KM</span>

2、可以合并的代码合并
loopActive (item) { item.isActive = false }, chioceCar (item) { this.carList.map(item => item.isActive = false) // 改为 this.carList.map((item) => { item.isActive = false })
3、简单的if语句全部改为三元表达式
if (val !== '选择发动机排量' && this.year !== '选择生产年份') { this.OptConfirm() } // 改为 val !== '选择发动机排量' && this.year !== '选择生产年份' ? this.OptConfirm() : null

好吧 对加载速度并没有什么太大的改观 不过执行速度感觉变快了 （...