vue長列表優化

寫在前面：不知不覺～2023年的日子已經過去了3/4，看到微博熱搜說：2023年還剩下3個月的時候，心情突然驟降～哈哈哈哈

切入正題：

什麼是長列表優化？

我們為什麼需要長列表優化？

我們怎樣進行長列表優化

在我們的日常工作中，會越到各種各樣的列表，比如，我們通常採用分頁的方式進行內容的逐漸獲取，但是不可否認的是，當我們列表內容過多的時候，就會出現頁面滑動卡頓、資料渲染較慢的問題，本次將以10000條資料為基準，進行長列表的優化說明

進行長列表優化，其實和js在瀏覽器中執行的順序有莫大的關係，在我們進行頁面訪問的時候，瀏覽器會根據頁面進行渲染的進行，主要包含

我們的每一步操作，是否恰當或者是否阻塞瀏覽器的執行機制，都是有莫大的關聯的

l瀏覽器中對於js的執行順序

引擎執行緒和ui執行緒是共用乙個執行緒，js的主線程是單執行緒的，但是其在執行過程中能夠開發進行新的執行緒，

1.先進行10000的資料初渲染

我們在懟頁面進行操作的時候，能夠感覺到此時是卡頓的，白屏的時間也是達到了3秒多

2.切片，分段渲染頁面

let total =100000;
var con = document.getelementbyid("container")
let timer = date.now();
let index = 0;
let id = 0;//遞增的內容
//分片 根據資料大小劃分，每次載入固定的資料
function load() 
load();
},0)}}
//分片載入 會導致頁面dom元素過多，造成頁面的卡頓
load();

此時進行分片的處理方式，先讓頁面渲染50條資料，然後在逐漸渲染50條資料，達到了分片的目的，但是如果使用者此時拉動比較快的話，頁面資料還沒有渲染出來，導致存在空白螢幕的情況，但是可以解決簡單的分頁資料獲取的問題

不管是切片還是分時進行載入，無非是解決dom節點過多的時候，給我們頁面帶來的壓力問題，因此嘗試動態載入固定資料的節點專案，進而讓頁面中的dom節點減少，渲染一定資料的節點資料；

可以通過按需進行載入dom，即在可視區域內根據當前滾動的高度和列表的長度進行渲染響應dom頁面中減少dom的結構資料

我們dom的節點只載入可視區域的內容

思路分析

首先進行外側的容器的scroll事件進行監聽

計算當前滾動的高度

計算開始位置和結束位置

計算向上滾動的偏移量

進行可視區域資料計算

1.構造資料

import mock from 'mockjs'let  items  =;
for(var i=0;i<500;i++))
}

2. 使用列表進行資料傳入

true>

virtallist.vue的dom結構

樣式結構

.viewport

.scroll-list

3.引數說明

size: number, //當前每一項的高度

remain: number, //可見多少個

items: array, //當前專案

4.滾動監聽後handlscroll的處理函式

由於我們每個列表的高度都是固定的，因此我們不需要計算高度，

this.$refs.viewport.style.height = this.size * this.remain + "px"; //當前的一項高度*顯示的專案高度

this.$refs.scrollbar.style.height = this.items.length * this.size + "px"; //當前總長度*當前的專案高度

this.start = math.floor(scrolltop / this.size); //列表開始的位置應該額等於滾動的位置/列表的高度

this.end = this.start + this.remain; //要渲染列表結束的位置等於列表開始的位置加上每一頁資料展示的高度

//如果前面有預留渲染，應該把這個位置向上移動

this.offset = this.start * this.size - this.prevcount * this.size;

5.計算視覺化的資料列表，渲染該列表即可

computed: ,
},

6.此時看到了prevcount 和nextcount ,是為了解決問題不一致的原因，比如上滑倒一半時候，視覺化資料的前乙個資料還沒有渲染出來，此時導致資料是空白的，後面的資料也是一樣，如果存在一般沒有載入出來的時候，可能導致後面就是白色空白的頁面，因此，此時需要將可視區域的前面幾項和後面幾項多載入出來，防止出現空白化的問題，定義prevcount和nextcount

computed: ,
//後面預留幾個
nextcount() , 
},

這樣就可以有效的防止滑動到可視區域的第一項的時候或者最後一項的時候為空而出現空白的頁面

但是在實際工作中，可能列表的高度是乙個不固定的值，這個時候我們就需要進行動態的配置高度和顯示，

思路分析

預估列表的初始高度值，和實際值的列表相差幅度不是很大

根據預估值儲存每個列表的頂部top,高度、底部bottom

滾動時候根據二分查詢方法查詢到當前的初始區域，

更新列表中的實際高度

1.設定列表的 varlable 屬性，表示當前的item的子專案是不固定高度的

2.初始化列表的儲存高度預估高度

//快取當前的高度，top志等資訊，還有bottom
cachelist() ;
});

3.滾動時候根據scrolltop查詢到當前可視區域開始顯示位置和結束顯示位置

let scrolltop = this.$refs.viewport.scrolltop;
if (this.varlable) else

4.二分查詢方法進行查詢開始位置和結束位置

getstartindex(value)else if(middlevalue value)
end = middleindex -1; } }
return temp; 
},

二分查詢法進行步驟分析

5.更新元件內儲存的列表高度

此時列表是不固定高度的，因此在滾動的過程中，我們需要對列表的真實高度進行測試和賦值

在vue的updated的生命週期中進行更新資料操作

updated() 
//遍歷當前所在節點資訊，
nodes.foreach(node=> = node.getboundingclientrect();//真實高度 
let id = node.getattribute('vid')-0; //獲取當前的item的位置，id表示index
let oldheight = this.positions[id].height; //老的高度 
let val = oldheight - height; //高度差值 
//如果當前元素存在高度差值，則當前高度需要進行增加/減少，這樣，當前元素的後面元素的表示位置也需要在原高度上進行更改
if(val) 
} })
//動態的計算滾動條的高度 滾動條的高度就等於positions的最後乙個元素的最底部的位置
this.$refs.scrollbar.style.height 
= this.positions[this.positions.length-1].bottom 
+'px'
})},

除了我們的高度，滾動條設定的為初始值，因此也需要進行更新

效果圖展示：

留下一些疑問，我們在滾動的時候其實做著大量的計算操作，會不會影響效能呢？

這樣做的好處又是什麼呢？

vue長列表優化

vue 長列表效能優化

優化長列表

靜態長列表優化

vue長列表優化

vue 長列表效能優化

優化長列表

靜態長列表優化

相關推薦