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

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

背景

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

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

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

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

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

既然 Vue 并沒有給我們制定太低的性能天花板，那么我們可以在使用 Vue 的基礎上繼續(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)渲染的列表。對應到代碼也很簡單，就是將 v-if 改為 v-show，這樣就可以通過 CSS 來控制兩個列表的顯示/隱藏，從而避免 DOM 元素的重復創(chuàng)建。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

廣告

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