從chromeF12工具欄中打開(kāi)performance
優(yōu)化一搁吓、所有靜態(tài)html添加v-once
可以看到加載和渲染稍快了一點(diǎn)(other 表示 網(wǎng)絡(luò))
但是v-once是緩存機(jī)制 所以用戶首次進(jìn)入無(wú)效 但是能大大提高路由切換時(shí)的效率
優(yōu)化二原茅、使用v-pre
v-pre 跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程吭历《樽校可以用來(lái)顯示原始 Mustache 標(biāo)簽。跳過(guò)大量沒(méi)有指令的節(jié)點(diǎn)會(huì)加快編譯晌区。
優(yōu)化三摩骨、刪除不必要的HTTP請(qǐng)求
發(fā)現(xiàn)早期遺留的現(xiàn)在不在項(xiàng)目中使用兩個(gè)http請(qǐng)求
占用非常多的帶寬 果斷刪除
loading 加快了呢
優(yōu)化四、刪除歷史遺留代碼
早期沒(méi)有很好的代碼review 現(xiàn)在項(xiàng)目里一大堆垃圾代碼 現(xiàn)在清理一下
優(yōu)化五朗若、優(yōu)化代碼結(jié)構(gòu)
1恼五、一行的函數(shù)放到虛擬dom中執(zhí)行
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哭懈、簡(jiǎn)單的if語(yǔ)句全部改為三元表達(dá)式
if (val !== '選擇發(fā)動(dòng)機(jī)排量' && this.year !== '選擇生產(chǎn)年份') { this.OptConfirm() } // 改為 val !== '選擇發(fā)動(dòng)機(jī)排量' && this.year !== '選擇生產(chǎn)年份' ? this.OptConfirm() : null
好吧 對(duì)加載速度并沒(méi)有什么太大的改觀 不過(guò)執(zhí)行速度感覺(jué)變快了 （...
