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

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

堅(jiān)守“ 做人真誠(chéng) · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專(zhuān)業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都房屋鑒定小微創(chuàng)業(yè)公司專(zhuān)業(yè)提供成都企業(yè)網(wǎng)站定制營(yíng)銷(xiāo)網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺(jué)設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁(yè)布局、功能開(kāi)發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

背景

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

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

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

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

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

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

再來(lái)看看代碼，點(diǎn)擊切換的時(shí)候到底發(fā)生了什么。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

由于這些方案還沒(méi)有來(lái)得及實(shí)踐，這里就不具體展開(kāi)了~

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

新聞名稱(chēng)：Vue列表渲染的性能優(yōu)化舉例分析
瀏覽地址：http://bm7419.com/article30/ijpeso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、做網(wǎng)站、網(wǎng)站導(dǎo)航、關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計(jì)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)