1麸塞、利用v-if和v-show減少初始化渲染和切換渲染的性能開銷
2笨奠、computed管呵、watch梳毙、methods區(qū)分使用場(chǎng)景
3、提前處理好數(shù)據(jù)解決v-if和v-for必須同級(jí)的問題
4捐下、給v-for循環(huán)項(xiàng)加上key提高diff計(jì)算速度
5账锹、利用v-once處理只會(huì)渲染一次的元素或組件
6、利用Object.freeze()凍結(jié)不需要響應(yīng)式變化的數(shù)據(jù)
7坷襟、提前過濾掉非必須數(shù)據(jù)奸柬，優(yōu)化data選項(xiàng)中的數(shù)據(jù)結(jié)構(gòu)
8、避免在v-for循環(huán)中讀取data中數(shù)組類型的數(shù)據(jù)
9婴程、防抖和節(jié)流
防抖和節(jié)流是針對(duì)用戶操作的優(yōu)化廓奕。首先來了解一下防抖和節(jié)流的概念。
防抖：觸發(fā)事件后規(guī)定時(shí)間內(nèi)事件只會(huì)執(zhí)行一次。簡(jiǎn)單來說就是防止手抖桌粉，短時(shí)間操作了好多次蒸绩。
節(jié)流：事件在規(guī)定時(shí)間內(nèi)只執(zhí)行一次。
應(yīng)用場(chǎng)景： 節(jié)流不管事件有沒有觸發(fā)還是頻繁觸發(fā)铃肯，在規(guī)定時(shí)間內(nèi)一定會(huì)只執(zhí)行一次事件患亿，而防抖是在規(guī)定時(shí)間內(nèi)事件被觸發(fā)，且是最后一次被觸發(fā)才執(zhí)行一次事件押逼。假如事件需要定時(shí)執(zhí)行步藕，但是其他操作也會(huì)讓事件執(zhí)行，這種場(chǎng)景可以用節(jié)流挑格。假如事件不需要定時(shí)執(zhí)行漱抓，需被觸發(fā)才執(zhí)行，且短時(shí)間內(nèi)不能執(zhí)行多次恕齐，這種場(chǎng)景可以用防抖。
在用Vue Cli腳手架搭建的Vue項(xiàng)目中瞬逊，可以通過引用Lodash工具庫(kù)里面的debounce防抖函數(shù)和throttle節(jié)流函數(shù)显歧。
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';
export default{
methods:{
? ? a: debounce(function (){
? ? ? ? //...
? ? ? ? },200,{
? ? ? ? ? ? 'leading': false,
? ? ? ? ? ? 'trailing': true
? ? ? ? }),
? ? ? ? b: throttle(function (){
? ? ? ? //...
? ? ? ? },200,{
? ? ? ? ? ? 'leading': false,
? ? ? ? ? ? 'trailing': true
? ? ? ? })
? ? }
}
。debounce(func, [wait=0], [options={}])創(chuàng)建一個(gè)防抖函數(shù)确镊，該函數(shù)會(huì)從上一次被調(diào)用后士骤，延遲 wait 毫秒后調(diào)用 func ????方法。返回一個(gè)防抖函數(shù)debounceFn蕾域，debounce.cancel取消防抖拷肌，debounce.flush立即調(diào)用該func。
????????options.leading為true時(shí)旨巷，func在延遲開始前調(diào)用巨缘。
????????options.trailing為true時(shí)，func在延遲開始結(jié)束后調(diào)用采呐。
????????options.maxWait設(shè)置func 允許被延遲的最大值若锁。
。throttle(func, [wait=0], [options={}])創(chuàng)建一個(gè)節(jié)流函數(shù)斧吐，在 wait 秒內(nèi)最多執(zhí)行 func 一次的函數(shù)又固。 返回一個(gè)節(jié)流函? ? ? 數(shù)throttleFn，throttleFn.cancel取消節(jié)流煤率，throttleFn.flush立即調(diào)用該func仰冠。
????????options.leading為true時(shí)，func在節(jié)流開始前調(diào)用蝶糯。
????????options.trailing為true時(shí)洋只，func在節(jié)流結(jié)束后調(diào)用。
????????leading和trailing都為true，func在wait期間多次調(diào)用木张。
10众辨、圖片大小優(yōu)化和懶加載
關(guān)于圖片大小的優(yōu)化，可以用image-webpack-loader進(jìn)行壓縮圖片舷礼，在webpack插件中配置鹃彻，具體可以看本文中這點(diǎn)。
關(guān)于圖片懶加載妻献，可以用vue-lazyload插件實(shí)現(xiàn)蛛株。
執(zhí)行命令npm install vue-lazyload --save安裝vue-lazyload插件。在main.js中引入配置
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
? preLoad: 1.3,//預(yù)載高度比例
? error: 'dist/error.png',//加載失敗顯示圖片
? loading: 'dist/loading.gif',//加載過程中顯示圖片
? attempt: 1,//嘗試次數(shù)
})
在項(xiàng)目中使用
<img v-lazy="/static/img/1.png">
11育拨、利用掛載節(jié)點(diǎn)會(huì)被替換的特性優(yōu)化白屏問題
import Vue from 'vue'
import App from './App.vue'
new Vue({
? ? render: h => h(App)
}).$mount('#app')
Vue 選項(xiàng)中的 render 函數(shù)若存在谨履，則 Vue 構(gòu)造函數(shù)不會(huì)從 template 選項(xiàng)或通過 el 選項(xiàng)指定的掛載元素中提取出的 HTML 模板編譯渲染函數(shù)。
也就是說渲染時(shí)熬丧，會(huì)直接用render渲染出來的內(nèi)容替換<div id="app"></div>笋粟。
Vue項(xiàng)目有個(gè)缺點(diǎn)，首次渲染會(huì)有一段時(shí)間的白屏原因是首次渲染時(shí)需要加載一堆資源析蝴，如js害捕、css、圖片闷畸。很多優(yōu)化策略尝盼，最終目的是提高這些資源的加載速度。但是如果遇上網(wǎng)絡(luò)慢的情況佑菩，無論優(yōu)化到極致還是需要一定加載時(shí)間盾沫，這時(shí)就會(huì)出現(xiàn)白屏現(xiàn)象。
首先加載是index.html頁(yè)面殿漠，其是沒有內(nèi)容赴精，就會(huì)出現(xiàn)白屏。如果<div id="app"></div>里面有內(nèi)容绞幌，就不會(huì)出現(xiàn)白屏祖娘。所以我們可以在<div id="app"></div>里添加首屏的靜態(tài)頁(yè)面。等真正的首屏加載出來后就會(huì)把<div id="app"></div>這塊結(jié)構(gòu)都替換掉啊奄，給人一種視覺上的誤差渐苏，就不會(huì)產(chǎn)生白屏。
11菇夸、組件庫(kù)的按需引入
作者：紅塵煉心
鏈接：https://juejin.cn/post/6857856269488193549
來源：掘金
著作權(quán)歸作者所有琼富。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處庄新。
