Vue列表渲染的性能優(yōu)化舉例分析

本篇內(nèi)容介紹了“Vue列表渲染的性能優(yōu)化舉例分析”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

背景

團隊目前的Web端產(chǎn)品中需要顯示兩個列表視圖：卡片列表和條目列表，并且在點擊切換按鈕的時候，對兩個列表進行切換顯示。

在開發(fā)完成進行簡單性能測試時，發(fā)現(xiàn)列表數(shù)量達(dá)到數(shù)百條后，切換視圖就會造成明顯的頁面卡頓，用戶體驗很差。于是著手進行性能優(yōu)化。

第一次優(yōu)化：解決已知問題

由于項目是使用 Vue.js （以下簡稱 "Vue"）來實現(xiàn)，所以首先查看 Vue 是否存在性能瓶頸，如果存在則考慮替換 Vue 進行優(yōu)化。

通過查看官方給出的benchmark結(jié)果，我們可以得知 Vue 的列表渲染性能在高亮和交換列表元素的時候性能較差，在創(chuàng)建列表和新增列表元素的時候性能都是不錯的，執(zhí)行時間在毫秒級別。

既然 Vue 并沒有給我們制定太低的性能天花板，那么我們可以在使用 Vue 的基礎(chǔ)上繼續(xù)進行性能優(yōu)化。

再來看看代碼，點擊切換的時候到底發(fā)生了什么。

點擊事件觸發(fā)后會引起組件屬性 cViewType 變化，然后兩個視圖的列表會根據(jù) cViewType 的值進行渲染。部分代碼如下：

<section class="file-card-list" v-if="cViewType == 'card'">
  ......
</section>
<section class="file-line-list" v-if="cViewType == 'line'">
  ......
</section>

這里通過 v-if 指令來實現(xiàn)列表切換，每次切換時都會銷毀之前的視圖列表，然后創(chuàng)建一個新的視圖列表。在列表元素非常多時，會造成大量的 DOM 元素創(chuàng)建和銷毀，性能開銷是很昂貴的。

所以進行優(yōu)化的最簡單方式就是緩存已經(jīng)渲染的列表。對應(yīng)到代碼也很簡單，就是將 v-if 改為 v-show，這樣就可以通過 CSS 來控制兩個列表的顯示/隱藏，從而避免 DOM 元素的重復(fù)創(chuàng)建。

改動之后效果確實也非常明顯，事情似乎到此結(jié)束，但如果列表數(shù)量增加到一兩個數(shù)量級，比如到達(dá)一萬，是否仍舊流暢呢？

第二次優(yōu)化：排查可能的問題

當(dāng)我將列表元素數(shù)量增加到一萬之后，卡頓問題果然再次出現(xiàn)了。

而瀏覽器頁面卡頓無外乎兩個原因，要么腳本引擎在執(zhí)行 js 代碼，要么渲染引擎在渲染頁面。

由于前面已經(jīng)對腳本引擎執(zhí)行 js 代碼的問題進行過優(yōu)化，這一次我們將優(yōu)化方向轉(zhuǎn)向渲染引擎。

渲染引擎程序需要借助 CPU 來執(zhí)行渲染操作，而 CPU 本身并不擅長于處理批量圖形渲染，所以可以把這部分的渲染工作交給 GPU。

通過設(shè)置 CSS 樣式就可以調(diào)用 GPU，下面是一種實現(xiàn)方式。

1. 首先將兩個視圖列表都設(shè)置為絕對定位，脫離文檔流。

2. 然后在點擊事件中動態(tài)修改視圖列表的 z-index 屬性，控制兩個列表的層疊關(guān)系，通過讓一個列表覆蓋另一個列表來實現(xiàn)顯示/隱藏效果。

這里需要注意的是，雖然只要讓卡片列表脫離文檔流就可以達(dá)到效果，但由于條目列表高度超過卡片列表，導(dǎo)致在顯示卡片列表時底部仍然出現(xiàn)條目列表元素，所以將兩個元素都設(shè)置為絕對定位，并且讓其擁有各自獨立的滾動條。

優(yōu)化之后，萬張圖片可以實現(xiàn)毫秒級切換，非常順滑。

第三次優(yōu)化：思考方案的副作用

世上沒有銀彈，即使借用GPU來加速渲染仍會產(chǎn)生一些副作用。

由于 GPU 對渲染圖形數(shù)量不敏感而對渲染次數(shù)敏感，而瀏覽器對請求的并發(fā)數(shù)（一次并發(fā)8~6個請求）又有限制，這在一定程度上會增加 GPU 的渲染次數(shù)，從而影響用戶體驗。

對于這個問題可以通過 HTTP/2 協(xié)議提升并發(fā)能力或者采用分批預(yù)加載的方式（等一批圖片資源都預(yù)加載完再更新到卡片列表）。

由于這些方案還沒有來得及實踐，這里就不具體展開了~

“Vue列表渲染的性能優(yōu)化舉例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！