从chromeF12工具栏中打开performance
优化一、所有静态html添加v-once
可以看到加载和渲染稍快了一点(other 表示 网络)
但是v-once是缓存机制 所以用户首次进入无效 但是能大大提高路由切换时的效率
优化二、使用v-pre
v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
优化三、删除不必要的HTTP请求
发现早期遗留的现在不在项目中使用两个http请求
占用非常多的带宽 果断删除
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
好吧 对加载速度并没有什么太大的改观 不过执行速度感觉变快了 （...
