萬(wàn)字長(zhǎng)文！總結(jié)Vue性能優(yōu)化方式及原理
前言
我們?cè)谑褂?Vue 或其他框架的日常開(kāi)發(fā)中，或多或少的都會(huì)遇到一些性能問(wèn)題，盡管 Vue 內(nèi)部已經(jīng)幫助我們做了許多優(yōu)化，但是還是有些問(wèn)題是需要我們主動(dòng)去避免的。我在我的日常開(kāi)中，以及網(wǎng)上各種大佬的文章中總結(jié)了一些容易產(chǎn)生性能問(wèn)題的場(chǎng)景以及針對(duì)這些問(wèn)題優(yōu)化的技巧，這篇文章就來(lái)探討下，希望對(duì)你有所幫助。
使用v-slot:slotName，而不是slot="slotName"
v-slot是 2.6 新增的語(yǔ)法，具體可查看:Vue2.6，2.6 發(fā)布已經(jīng)是快兩年前的事情了，但是現(xiàn)在仍然有不少人仍然在使用slot="slotName"這個(gè)語(yǔ)法。雖然這兩個(gè)語(yǔ)法都能達(dá)到相同的效果，但是內(nèi)部的邏輯確實(shí)不一樣的，下面來(lái)看下這兩種方式有什么不同之處。
我們先來(lái)看下這兩種語(yǔ)法分別會(huì)被編譯成什么：
使用新的寫法，對(duì)于父組件中的以下模板：
<child>
<template v-slot:name>{{name}}</template>
</child>
復(fù)制代碼
會(huì)被編譯成：
function render() {
with (this) {
return _c('child', {
scopedSlots: _u([
{
key: 'name',
fn: function () {
return [_v(_s(name))]
},
proxy: true
}
])
})
}
}
復(fù)制代碼
使用舊的寫法，對(duì)于以下模板：
<child>
<template slot="name">{{name}}</template>
</child>
復(fù)制代碼
會(huì)被編譯成：
function render() {
with (this) {
return _c(
'child',
[
_c(
'template',
{
slot: 'name'
},
[_v(_s(name))]
)
],
)
}
}
復(fù)制代碼
通過(guò)編譯后的代碼可以發(fā)現(xiàn)，舊的寫法是將插槽內(nèi)容作為 children 渲染的，會(huì)在父組件的渲染函數(shù)中創(chuàng)建，插槽內(nèi)容的依賴會(huì)被父組件收集（name 的 dep 收集到父組件的渲染 watcher），而新的寫法將插槽內(nèi)容放在了 scopedSlots 中，會(huì)在子組件的渲染函數(shù)中調(diào)用，插槽內(nèi)容的依賴會(huì)被子組件收集（name 的 dep 收集到子組件的渲染 watcher），最終導(dǎo)致的結(jié)果就是：當(dāng)我們修改 name 這個(gè)屬性時(shí)，舊的寫法是調(diào)用父組件的更新（調(diào)用父組件的渲染 watcher），然后在父組件更新過(guò)程中調(diào)用子組件更新（prePatch => updateChildComponent），而新的寫法則是直接調(diào)用子組件的更新（調(diào)用子組件的渲染 watcher）。
這樣一來(lái)，舊的寫法在更新時(shí)就多了一個(gè)父組件更新的過(guò)程，而新的寫法由于直接更新子組件，就會(huì)更加高效，性能更好，所以推薦始終使用v-slot:slotName語(yǔ)法。
使用計(jì)算屬性
這一點(diǎn)已經(jīng)被提及很多次了，計(jì)算屬性最大的一個(gè)特點(diǎn)就是它是可以被緩存的，這個(gè)緩存指的是只要它的依賴的不發(fā)生改變，它就不會(huì)被重新求值，再次訪問(wèn)時(shí)會(huì)直接拿到緩存的值，在做一些復(fù)雜的計(jì)算時(shí)，可以極大提升性能。可以看以下代碼：
<template>
<div>{{superCount}}</div>
</template>
<script>
export default {
data() {
return {
count: 1
}
},
computed: {
superCount() {
let superCount = this.count
// 假設(shè)這里有個(gè)復(fù)雜的計(jì)算
for (let i = 0; i < 10000; i++) {
superCount++
}
return superCount
}
}
}
</script>
復(fù)制代碼
這個(gè)例子中，在 created、mounted 以及模板中都訪問(wèn)了 superCount 屬性，這三次訪問(wèn)中，實(shí)際上只有第一次即created時(shí)才會(huì)對(duì) superCount 求值，由于 count 屬性并未改變，其余兩次都是直接返回緩存的 value，對(duì)于計(jì)算屬性更加詳細(xì)的介紹可以看我之前寫的文章：Vue computed 是如何實(shí)現(xiàn)的？。
使用函數(shù)式組件
對(duì)于某些組件，如果我們只是用來(lái)顯示一些數(shù)據(jù)，不需要管理狀態(tài)，監(jiān)聽(tīng)數(shù)據(jù)等，那么就可以用函數(shù)式組件。函數(shù)式組件是無(wú)狀態(tài)的，無(wú)實(shí)例的，在初始化時(shí)不需要初始化狀態(tài)，不需要?jiǎng)?chuàng)建實(shí)例，也不需要去處理生命周期等，相比有狀態(tài)組件，會(huì)更加輕量，同時(shí)性能也更好。具體的函數(shù)式組件使用方式可參考官方文檔：函數(shù)式組件
我們可以寫一個(gè)簡(jiǎn)單的 demo 來(lái)驗(yàn)證下這個(gè)優(yōu)化：
// UserProfile.vue
<template>
<div class="user-profile">{{ name }}</div>
</template>
<script>
export default {
props: ['name'],
data() {
return {}
},
methods: {}
}
</script>
<style scoped></style>
// App.vue
<template>
<div id="app">
<UserProfile v-for="item in list" :key="item" : />
</div>
</template>
<script>
import UserProfile from './components/UserProfile'
export default {
name: 'App',
components: { UserProfile },
data() {
return {
list: Array(500)
.fill(null)
.map((_, idx) => 'Test' + idx)
}
},
beforeMount() {
this.start = Date.now()
},
mounted() {
console.log('用時(shí):', Date.now() - this.start)
}
}
</script>
<style></style>
復(fù)制代碼
UserProfile 這個(gè)組件只渲染了 props 的 name，然后在 App.vue 中調(diào)用 500 次，統(tǒng)計(jì)從 beforeMount 到 mounted 的耗時(shí)，即為 500 個(gè)子組件（UserProfile）初始化的耗時(shí)。
經(jīng)過(guò)我多次嘗試后，發(fā)現(xiàn)耗時(shí)一直在 30ms 左右，那么現(xiàn)在我們?cè)侔迅某?UserProfile 改成函數(shù)式組件：
<template functional>
<div class="user-profile">{{ props.name }}</div>
</template>
復(fù)制代碼
此時(shí)再經(jīng)過(guò)多次嘗試后，初始化的耗時(shí)一直在 10-15ms，這些足以說(shuō)明函數(shù)式組件比有狀態(tài)組件有著更好的性能。
結(jié)合場(chǎng)景使用 v-show 和 v-if
以下是兩個(gè)使用 v-show 和 v-if 的模板
<template>
<div>
<UserProfile :user="user1" v-if="visible" />
<button @click="visible = !visible">toggle</button>
</div>
</template>
復(fù)制代碼
<template>
<div>
<UserProfile :user="user1" v-show="visible" />
<button @click="visible = !visible">toggle</button>
</div>
</template>
復(fù)制代碼
這兩者的作用都是用來(lái)控制某些組件或 DOM 的顯示 / 隱藏，在討論它們的性能差異之前，先來(lái)分析下這兩者有何不同。其中，v-if 的模板會(huì)被編譯成：
function render() {
with (this) {
return _c(
'div',
[
visible
? _c('UserProfile', {
attrs: {
user: user1
}
})
: _e(),
_c(
'button',
{
on: {
click: function ($event) {
visible = !visible
}
}
},
[_v('toggle')]
)
],
)
}
}
復(fù)制代碼
可以看到，v-if 的部分被轉(zhuǎn)換成了一個(gè)三元表達(dá)式，visible 為 true 時(shí)，創(chuàng)建一個(gè) UserProfile 的 vnode，否則創(chuàng)建一個(gè)空 vnode，在 patch 的時(shí)候，新舊節(jié)點(diǎn)不一樣，就會(huì)移除舊的節(jié)點(diǎn)或創(chuàng)建新的節(jié)點(diǎn)，這樣的話UserProfile也會(huì)跟著創(chuàng)建 / 銷毀。如果UserProfile組件里有很多 DOM，或者要執(zhí)行很多初始化 / 銷毀邏輯，那么隨著 visible 的切換，勢(shì)必會(huì)浪費(fèi)掉很多性能。這個(gè)時(shí)候就可以用 v-show 進(jìn)行優(yōu)化，我們來(lái)看下 v-show 編譯后的代碼：
function render() {
with (this) {
return _c(
'div',
[
_c('UserProfile', {
directives: [
{
name: 'show',
rawName: 'v-show',
value: visible,
expression: 'visible'
}
],
attrs: {
user: user1
}
}),
_c(
'button',
{
on: {
click: function ($event) {
visible = !visible
}
}
},
[_v('toggle')]
)
],
)
}
}
復(fù)制代碼
v-show被編譯成了directives，實(shí)際上，v-show 是一個(gè) Vue 內(nèi)部的指令，在這個(gè)指令的代碼中，主要執(zhí)行了以下邏輯：
el.style.display = value ? el.__vOriginalDisplay : 'none'
復(fù)制代碼
它其實(shí)是通過(guò)切換元素的 display 屬性來(lái)控制的，和 v-if 相比，不需要在 patch 階段創(chuàng)建 / 移除節(jié)點(diǎn)，只是根據(jù)v-show上綁定的值來(lái)控制 DOM 元素的style.display屬性，在頻繁切換的場(chǎng)景下就可以節(jié)省很多性能。
但是并不是說(shuō)v-show可以在任何情況下都替換v-if，如果初始值是false時(shí)，v-if并不會(huì)創(chuàng)建隱藏的節(jié)點(diǎn)，但是v-show會(huì)創(chuàng)建，并通過(guò)設(shè)置style.display='none'來(lái)隱藏，雖然外表看上去這個(gè) DOM 都是被隱藏的，但是v-show已經(jīng)完整的走了一遍創(chuàng)建的流程，造成了性能的浪費(fèi)。
所以，v-if的優(yōu)勢(shì)體現(xiàn)在初始化時(shí)，v-show體現(xiàn)在更新時(shí)，當(dāng)然并不是要求你絕對(duì)按照這個(gè)方式來(lái)，比如某些組件初始化時(shí)會(huì)請(qǐng)求數(shù)據(jù)，而你想先隱藏組件，然后在顯示時(shí)能立刻看到數(shù)據(jù)，這時(shí)候就可以用v-show，又或者你想每次顯示這個(gè)組件時(shí)都是最新的數(shù)據(jù)，那么你就可以用v-if，所以我們要結(jié)合具體業(yè)務(wù)場(chǎng)景去選一個(gè)合適的方式。
使用 keep-alive
在動(dòng)態(tài)組件的場(chǎng)景下：
<template>
<div>
<component :is="currentComponent" />
</div>
</template>
復(fù)制代碼
這個(gè)時(shí)候有多個(gè)組件來(lái)回切換，currentComponent每變一次，相關(guān)的組件就會(huì)銷毀 / 創(chuàng)建一次，如果這些組件比較復(fù)雜的話，就會(huì)造成一定的性能壓力，其實(shí)我們可以使用 keep-alive 將這些組件緩存起來(lái)：
<template>
<div>
<keep-alive>
<component :is="currentComponent" />
</keep-alive>
</div>
</template>
復(fù)制代碼
keep-alive的作用就是將它包裹的組件在第一次渲染后就緩存起來(lái)，下次需要時(shí)就直接從緩存里面取，避免了不必要的性能浪費(fèi)，在討論上個(gè)問(wèn)題時(shí)，說(shuō)的是v-show初始時(shí)性能壓力大，因?yàn)樗獎(jiǎng)?chuàng)建所有的組件，其實(shí)可以用keep-alive優(yōu)化下：
<template>
<div>
<keep-alive>
<UserProfileA v-if="visible" />
<UserProfileB v-else />
</keep-alive>
</div>
</template>
復(fù)制代碼
這樣的話，初始化時(shí)不會(huì)渲染UserProfileB組件，當(dāng)切換visible時(shí)，才會(huì)渲染UserProfileB組件，同時(shí)被keep-alive緩存下來(lái)，頻繁切換時(shí)，由于是直接從緩存中取，所以會(huì)節(jié)省很多性能，所以這種方式在初始化和更新時(shí)都有較好的性能。
但是keep-alive并不是沒(méi)有缺點(diǎn)，組件被緩存時(shí)會(huì)占用內(nèi)存，屬于空間和時(shí)間上的取舍，在實(shí)際開(kāi)發(fā)中要根據(jù)場(chǎng)景選擇合適的方式。
避免 v-for 和 v-if 同時(shí)使用
這一點(diǎn)是 Vue 官方的風(fēng)格指南中明確指出的一點(diǎn)：Vue 風(fēng)格指南
如以下模板：
<ul>
<li v-for="user in users" v-if="user.isActive" :key="user.id">
{{ user.name }}
</li>
</ul>
復(fù)制代碼
會(huì)被編譯成：
// 簡(jiǎn)化版
function render() {
return _c(
'ul',
this.users.map((user) => {
return user.isActive
? _c(
'li',
{
key: user.id
},
[_v(_s(user.name))]
)
: _e()
}),
)
}
復(fù)制代碼
可以看到，這里是先遍歷（v-for），再判斷（v-if），這里有個(gè)問(wèn)題就是：如果你有一萬(wàn)條數(shù)據(jù)，其中只有 100 條是isActive狀態(tài)的，你只希望顯示這 100 條，但是實(shí)際在渲染時(shí)，每一次渲染，這一萬(wàn)條數(shù)據(jù)都會(huì)被遍歷一遍。比如你在這個(gè)組件內(nèi)的其他地方改變了某個(gè)響應(yīng)式數(shù)據(jù)時(shí)，會(huì)觸發(fā)重新渲染，調(diào)用渲染函數(shù)，調(diào)用渲染函數(shù)時(shí)，就會(huì)執(zhí)行到上面的代碼，從而將這一萬(wàn)條數(shù)據(jù)遍歷一遍，即使你的users沒(méi)有發(fā)生任何改變。
為了避免這個(gè)問(wèn)題，在此場(chǎng)景下你可以用計(jì)算屬性代替：
<template>
<div>
<ul>
<li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li>
</ul>
</div>
</template>
<script>
export default {
// ...
computed: {
activeUsers() {
return this.users.filter((user) => user.isActive)
}
}
}
</script>
復(fù)制代碼
這樣只會(huì)在users發(fā)生改變時(shí)才會(huì)執(zhí)行這段遍歷的邏輯，和之前相比，避免了不必要的性能浪費(fèi)。
始終為 v-for 添加 key，并且不要將 index 作為的 key
這一點(diǎn)是 Vue 風(fēng)格指南中明確指出的一點(diǎn)，同時(shí)也是面試時(shí)常問(wèn)的一點(diǎn)，很多人都習(xí)慣的將 index 作為 key，這樣其實(shí)是不太好的，index 作為 key 時(shí)，將會(huì)讓 diff 算法產(chǎn)生錯(cuò)誤的判斷，從而帶來(lái)一些性能問(wèn)題，你可以看下 ssh 大佬的文章，深入分析下，為什么 Vue 中不要用 index 作為 key。在這里我也通過(guò)一個(gè)例子來(lái)簡(jiǎn)單說(shuō)明下當(dāng) index 作為 key 時(shí)是如何影響性能的。
看下這個(gè)例子：
const Item = {
name: 'Item',
props: ['message', 'color'],
render(h) {
debugger
console.log('執(zhí)行了Item的render')
return h('div', { style: { color: this.color } }, [this.message])
}
}
new Vue({
name: 'Parent',
template: `
<div @click="reverse" class="list">
<Item
v-for="(item,index) in list"
:key="item.id"
:message="item.message"
:color="item.color"
/>
</div>`,
components: { Item },
data() {
return {
list: [
{ id: 'a', color: '#f00', message: 'a' },
{ id: 'b', color: '#0f0', message: 'b' }
]
}
},
methods: {
reverse() {
this.list.reverse()
}
}
}).$mount('#app')
復(fù)制代碼
這里有一個(gè) list，會(huì)渲染出來(lái)a b，點(diǎn)擊后會(huì)執(zhí)行reverse方法將這個(gè) list 顛倒下順序，你可以將這個(gè)例子復(fù)制下來(lái)，在自己的電腦上看下效果。
我們先來(lái)分析用id作為 key 時(shí)，點(diǎn)擊時(shí)會(huì)發(fā)生什么，
由于 list 發(fā)生了改變，會(huì)觸發(fā)Parent組件的重新渲染，拿到新的vnode，和舊的vnode去執(zhí)行patch，我們主要關(guān)心的就是patch過(guò)程中的updateChildren邏輯，updateChildren就是對(duì)新舊兩個(gè)children執(zhí)行diff算法，使盡可能地對(duì)節(jié)點(diǎn)進(jìn)行復(fù)用，對(duì)于我們這個(gè)例子而言，此時(shí)舊的children是：
;[
{
tag: 'Item',
key: 'a',
propsData: {
color: '#f00',
message: '紅色'
}
},
{
tag: 'Item',
key: 'b',
propsData: {
color: '#0f0',
message: '綠色'
}
}
]
復(fù)制代碼
執(zhí)行reverse后的新的children是：
;[
{
tag: 'Item',
key: 'b',
propsData: {
color: '#0f0',
message: '綠色'
}
},
{
tag: 'Item',
key: 'a',
propsData: {
color: '#f00',
message: '紅色'
}
}
]
復(fù)制代碼
此時(shí)執(zhí)行updateChildren，updateChildren會(huì)對(duì)新舊兩組 children 節(jié)點(diǎn)的循環(huán)進(jìn)行對(duì)比：
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
if (isUndef(oldStartVnode)) {
oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
} else if (isUndef(oldEndVnode)) {
oldEndVnode = oldCh[--oldEndIdx]
} else if (sameVnode(oldStartVnode, newStartVnode)) {
// 對(duì)新舊節(jié)點(diǎn)執(zhí)行patchVnode
// 移動(dòng)指針
} else if (sameVnode(oldEndVnode, newEndVnode)) {
// 對(duì)新舊節(jié)點(diǎn)執(zhí)行patchVnode
// 移動(dòng)指針
} else if (sameVnode(oldStartVnode, newEndVnode)) {
// 對(duì)新舊節(jié)點(diǎn)執(zhí)行patchVnode
// 移動(dòng)oldStartVnode節(jié)點(diǎn)
// 移動(dòng)指針
} else if (sameVnode(oldEndVnode, newStartVnode)) {
// 對(duì)新舊節(jié)點(diǎn)執(zhí)行patchVnode
// 移動(dòng)oldEndVnode節(jié)點(diǎn)
// 移動(dòng)指針
} else {
//...
}
}
復(fù)制代碼
通過(guò)sameVnode判斷兩個(gè)節(jié)點(diǎn)是相同節(jié)點(diǎn)的話，就會(huì)執(zhí)行相應(yīng)的邏輯：
function sameVnode(a, b) {
return (
a.key === b.key &&
((a.tag === b.tag &&
a.isComment === b.isComment &&
isDef(a.data) === isDef(b.data) &&
sameInputType(a, b)) ||
(isTrue(a.isAsyncPlaceholder) &&
a.asyncFactory === b.asyncFactory &&
isUndef(b.asyncFactory.error)))
)
}
復(fù)制代碼
sameVnode主要就是通過(guò) key 去判斷，由于我們顛倒了 list 的順序，所以第一輪對(duì)比中：sameVnode(oldStartVnode, newEndVnode)成立，即舊的首節(jié)點(diǎn)和新的尾節(jié)點(diǎn)是同一個(gè)節(jié)點(diǎn)，此時(shí)會(huì)執(zhí)行patchVnode邏輯，patchVnode中會(huì)執(zhí)行prePatch，prePatch中會(huì)更新 props，此時(shí)我們的兩個(gè)節(jié)點(diǎn)的propsData是相同的，都為{color: '#0f0',message: '綠色'}，這樣的話Item組件的 props 就不會(huì)更新，Item也不會(huì)重新渲染。再回到updateChildren中，會(huì)繼續(xù)執(zhí)行"移動(dòng)oldStartVnode節(jié)點(diǎn)"的操作，將 DOM 元素。移動(dòng)到正確位置，其他節(jié)點(diǎn)對(duì)比也是同樣的流程。
可以發(fā)現(xiàn)，在整個(gè)流程中，只是移動(dòng)了節(jié)點(diǎn)，并沒(méi)有觸發(fā) Item 組件的重新渲染，這樣實(shí)現(xiàn)了節(jié)點(diǎn)的復(fù)用。
我們?cè)賮?lái)看下使用index作為 key 的情況，使用index時(shí)，舊的children是：
;[
{
tag: 'Item',
key: 0,
propsData: {
color: '#f00',
message: '紅色'
}
},
{
tag: 'Item',
key: 1,
propsData: {
color: '#0f0',
message: '綠色'
}
}
]
復(fù)制代碼
執(zhí)行reverse后的新的children是：
;[
{
tag: 'Item',
key: 0,
propsData: {
color: '#0f0',
message: '綠色'
}
},
{
tag: 'Item',
key: 1,
propsData: {
color: '#f00',
message: '紅色'
}
}
]
復(fù)制代碼
這里和id作為 key 時(shí)的節(jié)點(diǎn)就有所不同了，雖然我們把 list 順序顛倒了，但是 key 的順序卻沒(méi)變，在updateChildren時(shí)sameVnode(oldStartVnode, newStartVnode)將會(huì)成立，即舊的首節(jié)點(diǎn)和新的首節(jié)點(diǎn)相同，此時(shí)執(zhí)行patchVnode -> prePatch -> 更新props，這個(gè)時(shí)候舊的 propsData 是{color: '#f00',message: '紅色'}，新的 propsData 是{color: '#0f0',message: '綠色'}，更新過(guò)后，Item 的 props 將會(huì)發(fā)生改變，會(huì)觸發(fā) Item 組件的重新渲染。
這就是 index 作為 key 和 id 作為 key 時(shí)的區(qū)別，id 作為 key 時(shí)，僅僅是移動(dòng)了節(jié)點(diǎn)，并沒(méi)有觸發(fā) Item 的重新渲染。index 作為 key 時(shí)，觸發(fā)了 Item 的重新渲染，可想而知，當(dāng) Item 是一個(gè)復(fù)雜的組件時(shí)，必然會(huì)引起性能問(wèn)題。
上面的流程比較復(fù)雜，涉及的也比較多，可以拆開(kāi)寫好幾篇文章，有些地方我只是簡(jiǎn)略的說(shuō)了一下，如果你不是很明白的話，你可以把上面的例子復(fù)制下來(lái)，在自己的電腦上調(diào)式，我在 Item 的渲染函數(shù)中加了打印日志和 debugger，你可以分別用 id 和 index 作為 key 嘗試下，你會(huì)發(fā)現(xiàn) id 作為 key 時(shí)，Item 的渲染函數(shù)沒(méi)有執(zhí)行，但是 index 作為 key 時(shí)，Item 的渲染函數(shù)執(zhí)行了，這就是這兩種方式的區(qū)別。
延遲渲染
延遲渲染就是分批渲染，假設(shè)我們某個(gè)頁(yè)面里有一些組件在初始化時(shí)需要執(zhí)行復(fù)雜的邏輯：
<template>
<div>
<!-- Heavy組件初始化時(shí)需要執(zhí)行很復(fù)雜的邏輯，執(zhí)行大量計(jì)算 -->
<Heavy1 />
<Heavy2 />
<Heavy3 />
<Heavy4 />
</div>
</template>
復(fù)制代碼
這將會(huì)占用很長(zhǎng)時(shí)間，導(dǎo)致幀數(shù)下降、卡頓，其實(shí)可以使用分批渲染的方式來(lái)進(jìn)行優(yōu)化，就是先渲染一部分，再渲染另一部分：
參考黃軼老師揭秘 Vue.js 九個(gè)性能優(yōu)化技巧中的代碼：
<template>
<div>
<Heavy v-if="defer(1)" />
<Heavy v-if="defer(2)" />
<Heavy v-if="defer(3)" />
<Heavy v-if="defer(4)" />
</div>
</template>
<script>
export default {
data() {
return {
displayPriority: 0
}
},
mounted() {
this.runDisplayPriority()
},
methods: {
runDisplayPriority() {
const step = () => {
requestAnimationFrame(() => {
this.displayPriority++
if (this.displayPriority < 10) {
step()
}
})
}
step()
},
defer(priority) {
return this.displayPriority >= priority
}
}
}
</script>
復(fù)制代碼
其實(shí)原理很簡(jiǎn)單，主要是維護(hù)displayPriority變量，通過(guò)requestAnimationFrame在每一幀渲染時(shí)自增，然后我們就可以在組件上通過(guò)v-if="defer(n)"使displayPriority增加到某一值時(shí)再渲染，這樣就可以避免 js 執(zhí)行時(shí)間過(guò)長(zhǎng)導(dǎo)致的卡頓問(wèn)題了。
使用非響應(yīng)式數(shù)據(jù)
在 Vue 組件初始化數(shù)據(jù)時(shí)，會(huì)遞歸遍歷在 data 中定義的每一條數(shù)據(jù)，通過(guò)Object.defineProperty將數(shù)據(jù)改成響應(yīng)式，這就意味著如果 data 中的數(shù)據(jù)量很大的話，在初始化時(shí)將會(huì)使用很長(zhǎng)的時(shí)間去執(zhí)行Object.defineProperty, 也就會(huì)帶來(lái)性能問(wèn)題，這個(gè)時(shí)候我們可以強(qiáng)制使數(shù)據(jù)變?yōu)榉琼憫?yīng)式，從而節(jié)省時(shí)間，看下這個(gè)例子：
<template>
<div>
<ul>
<li v-for="item in heavyData" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
// 一萬(wàn)條數(shù)據(jù)
const heavyData = Array(10000)
.fill(null)
.map((_, idx) => ({ name: 'test', message: 'test', id: idx }))
export default {
data() {
return {
heavyData: heavyData
}
},
beforeCreate() {
this.start = Date.now()
},
created() {
console.log(Date.now() - this.start)
}
}
</script>
復(fù)制代碼
heavyData中有一萬(wàn)條數(shù)據(jù)，這里統(tǒng)計(jì)了下從beforeCreate到created經(jīng)歷的時(shí)間，對(duì)于這個(gè)例子而言，這個(gè)時(shí)間基本上就是初始化數(shù)據(jù)的時(shí)間。
我在我個(gè)人的電腦上多次測(cè)試，這個(gè)時(shí)間一直在40-50ms，然后我們通過(guò)Object.freeze()方法，將heavyData變?yōu)榉琼憫?yīng)式的再試下：
//...
data() {
return {
heavyData: Object.freeze(heavyData)
}
}
//...
復(fù)制代碼
改完之后再試下，初始化數(shù)據(jù)的時(shí)間變成了0-1ms，快了有40ms，這40ms都是遞歸遍歷heavyData執(zhí)行Object.defineProperty的時(shí)間。
那么，為什么Object.freeze()會(huì)有這樣的效果呢？對(duì)某一對(duì)象使用Object.freeze()后，將不能向這個(gè)對(duì)象添加新的屬性，不能刪除已有屬性，不能修改該對(duì)象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。
而 Vue 在將數(shù)據(jù)改造成響應(yīng)式之前有個(gè)判斷：
export function observe(value, asRootData) {
// ...省略其他邏輯
if (
shouldObserve &&
!isServerRendering() &&
(Array.isArray(value) || isPlainObject(value)) &&
Object.isExtensible(value) &&
!value._isVue
) {
ob = new Observer(value)
}
// ...省略其他邏輯
}
復(fù)制代碼
這個(gè)判斷條件中有一個(gè)Object.isExtensible(value)，這個(gè)方法是判斷一個(gè)對(duì)象是否是可擴(kuò)展的，由于我們使用了Object.freeze()，這里肯定就返回了false，所以就跳過(guò)了下面的過(guò)程，自然就省了很多時(shí)間。
實(shí)際上，不止初始化數(shù)據(jù)時(shí)有影響，你可以用上面的例子統(tǒng)計(jì)下從created到mounted所用的時(shí)間，在我的電腦上不使用Object.freeze()時(shí)，這個(gè)時(shí)間是60-70ms，使用Object.freeze()后降到了40-50ms，這是因?yàn)樵阡秩竞瘮?shù)中讀取heavyData中的數(shù)據(jù)時(shí)，會(huì)執(zhí)行到通過(guò)Object.defineProperty定義的getter方法，Vue 在這里做了一些收集依賴的處理，肯定就會(huì)占用一些時(shí)間，由于使用了Object.freeze()后的數(shù)據(jù)是非響應(yīng)式的，沒(méi)有了收集依賴的過(guò)程，自然也就節(jié)省了性能。
由于訪問(wèn)響應(yīng)式數(shù)據(jù)會(huì)走到自定義 getter 中并收集依賴，所以平時(shí)使用時(shí)要避免頻繁訪問(wèn)響應(yīng)式數(shù)據(jù)，比如在遍歷之前先將這個(gè)數(shù)據(jù)存在局部變量中，尤其是在計(jì)算屬性、渲染函數(shù)中使用，關(guān)于這一點(diǎn)更具體的說(shuō)明，你可以看黃奕老師的這篇文章：Local variables
但是這樣做也不是沒(méi)有任何問(wèn)題的，這樣會(huì)導(dǎo)致heavyData下的數(shù)據(jù)都不是響應(yīng)式數(shù)據(jù)，你對(duì)這些數(shù)據(jù)使用computed、watch等都不會(huì)產(chǎn)生效果，不過(guò)通常來(lái)說(shuō)這種大量的數(shù)據(jù)都是展示用的，如果你有特殊的需求，你可以只對(duì)這種數(shù)據(jù)的某一層使用Object.freeze()，同時(shí)配合使用上文中的延遲渲染、函數(shù)式組件等，可以極大提升性能。
模板編譯和渲染函數(shù)、JSX 的性能差異
Vue 項(xiàng)目不僅可以使用 SFC 的方式開(kāi)發(fā)，也可以使用渲染函數(shù)或 JSX 開(kāi)發(fā)，很多人認(rèn)為僅僅是只是開(kāi)發(fā)方式不同，卻不知這些開(kāi)發(fā)方式之間也有性能差異，甚至差異很大，這一節(jié)我就找些例子來(lái)說(shuō)明下，希望你以后在選擇開(kāi)發(fā)方式時(shí)有更多衡量的標(biāo)準(zhǔn)。
其實(shí) Vue2 模板編譯中的性能優(yōu)化不多，Vue3 中有很多，Vue3 通過(guò)編譯和運(yùn)行時(shí)結(jié)合的方式提升了很大的性能，但是由于本篇文章講的是 Vue2 的性能優(yōu)化，并且 Vue2 現(xiàn)在還是有很多人在使用，所以我就挑 Vue2 模板編譯中的一點(diǎn)來(lái)說(shuō)下。
靜態(tài)節(jié)點(diǎn)
下面這個(gè)模板：
<div>你好！ <span>Hello</span></div>
復(fù)制代碼
會(huì)被編譯成：
function render() {
with (this) {
return _m(0)
}
}
復(fù)制代碼
可以看到和普通的渲染函數(shù)是有些不一樣的，下面我們來(lái)看下為什么會(huì)編譯成這樣的代碼。
Vue 的編譯會(huì)經(jīng)過(guò)optimize過(guò)程，這個(gè)過(guò)程中會(huì)標(biāo)記靜態(tài)節(jié)點(diǎn)，具體內(nèi)容可以看黃奕老師寫的這個(gè)文檔：Vue2 編譯 - optimize 標(biāo)記靜態(tài)節(jié)點(diǎn)。
在codegen階段判斷到靜態(tài)節(jié)點(diǎn)的標(biāo)記會(huì)走到genStatic的分支：
function genStatic(el, state) {
el.staticProcessed = true
const originalPreState = state.pre
if (el.pre) {
state.pre = el.pre
}
state.staticRenderFns.push(`with(this){return ${genElement(el, state)}}`)
state.pre = originalPreState
return `_m(${state.staticRenderFns.length - 1}${
el.staticInFor ? ',true' : ''
})`
}
復(fù)制代碼
這里就是生成代碼的關(guān)鍵邏輯，這里會(huì)把渲染函數(shù)保存在staticRenderFns里，然后拿到當(dāng)前值的下標(biāo)生成_m函數(shù)，這就是為什么我們會(huì)得到_m(0)。
這個(gè)_m其實(shí)是renderStatic的縮寫：
export function renderStatic(index, isInFor) {
const cached = this._staticTrees || (this._staticTrees = [])
let tree = cached[index]
if (tree && !isInFor) {
return tree
}
tree = cached[index] = this.$options.staticRenderFns[index].call(
this._renderProxy,
null,
this
)
markStatic(tree, `__static__${index}`, false)
return tree
}
function markStatic(tree, key) {
if (Array.isArray(tree)) {
for (let i = 0; i < tree.length; i++) {
if (tree[i] && typeof tree[i] !== 'string') {
markStaticNode(tree[i], `${key}_${i}`, isOnce)
}
}
} else {
markStaticNode(tree, key, isOnce)
}
}
function markStaticNode(node, key, isOnce) {
node.isStatic = true
node.key = key
node.isOnce = isOnce
}
復(fù)制代碼
renderStatic的內(nèi)部實(shí)現(xiàn)比較簡(jiǎn)單，先是獲取到組件實(shí)例的_staticTrees，如果沒(méi)有就創(chuàng)建一個(gè)，然后嘗試從_staticTrees上獲取之前緩存的節(jié)點(diǎn)，獲取到的話就直接返回，否則就從staticRenderFns上獲取到對(duì)應(yīng)的渲染函數(shù)執(zhí)行并將結(jié)果緩存到_staticTrees上，這樣下次再進(jìn)入這個(gè)函數(shù)時(shí)就會(huì)直接從緩存上返回結(jié)果。
拿到節(jié)點(diǎn)后還會(huì)通過(guò)markStatic將節(jié)點(diǎn)打上isStatic等標(biāo)記，標(biāo)記為isStatic的節(jié)點(diǎn)會(huì)直接跳過(guò)patchVnode階段，因?yàn)殪o態(tài)節(jié)點(diǎn)是不會(huì)變的，所以也沒(méi)必要 patch，跳過(guò) patch 可以節(jié)省性能。
通過(guò)編譯和運(yùn)行時(shí)結(jié)合的方式，可以幫助我們很好的提升應(yīng)用性能，這是渲染函數(shù) / JSX 很難達(dá)到的，當(dāng)然不是說(shuō)不能用 JSX，相比于模板，JSX 更加靈活，兩者有各自的使用場(chǎng)景。在這里寫這些是希望能給你提供一些技術(shù)選型的標(biāo)準(zhǔn)。
Vue2 的編譯優(yōu)化除了靜態(tài)節(jié)點(diǎn)，還有插槽，createElement 等。
Vue3 的模板編譯優(yōu)化
相比于 Vue2，Vue3 中的模板編譯優(yōu)化更加突出，性能提升的更多，由于涉及的比較多，本篇文章寫不下，如果你感興趣的話你可以看看這些文章：Vue3 Compiler 優(yōu)化細(xì)節(jié)，如何手寫高性能渲染函數(shù)，聊聊 Vue.js 3.0 的模板編譯優(yōu)化，以及尤雨溪的解讀視頻：Vue 之父尤雨溪深度解讀 Vue3.0 的開(kāi)發(fā)思路，以后我也會(huì)單獨(dú)寫一些文章分析 Vue3 的模板編譯優(yōu)化。
總結(jié)
希望你能通過(guò)這篇文章了解一些常見(jiàn)的 Vue 性能優(yōu)化方式并理解其背后的原理，在日常開(kāi)發(fā)中不僅要能寫出代碼，還要能知道這樣寫的好處 / 壞處是什么，避免寫出容易產(chǎn)生性能問(wèn)題的代碼。
這篇文章的內(nèi)容并不是全部的優(yōu)化方式。除了文章涉及的這些，還有打包優(yōu)化、異步加載，懶加載等等。性能優(yōu)化并不是一下子就完成的，需要你結(jié)合項(xiàng)目分析出性能瓶頸，找到問(wèn)題并解決，在這個(gè)過(guò)程中，你肯定能發(fā)掘出更多優(yōu)化方式。
最后，這篇文章寫了很長(zhǎng)時(shí)間，花費(fèi)了很多精力，如果你覺(jué)得對(duì)你有幫助的話，麻煩點(diǎn)個(gè)贊?，支持下，感謝！
相關(guān)推薦
以下是本文有參考或者相關(guān)的文章：
還在看那些老掉牙的性能優(yōu)化文章么？這些最新性能指標(biāo)了解下 揭秘 Vue.js 九個(gè)性能優(yōu)化技巧 Vue 應(yīng)用性能優(yōu)化指南 為什么 Vue 中不要用 index 作為 key？（diff 算法詳解） Vue2 編譯 - optimize 標(biāo)記靜態(tài)節(jié)點(diǎn) Vue3 Compiler 優(yōu)化細(xì)節(jié)，如何手寫高性能渲染函數(shù) Vue2.6 針對(duì)插槽的性能優(yōu)化 聊聊 Vue.js 3.0 的模板編譯優(yōu)化 「前端進(jìn)階」高性能渲染十萬(wàn)條數(shù)據(jù) (時(shí)間分片) Vue 之父尤雨溪深度解讀 Vue3.0 的開(kāi)發(fā)思路
以下是可以實(shí)時(shí)查看編譯結(jié)果的工具：
Vue2 Template Explorer Vue3 Template Explorer