原理:這種方案的原理是使用一個大容器作爲滾動區域,裏面有一個內容區域,JS通過數據數量和每條數據的高度計算出內容區的高度,內容區用padding或絕對定位撐開滾動區域,讓容器可滾動,另外就是數據項了,滾動的時候,計算當前滾動位置scrollTop,再從數據項中找出各項的高度,從頭到尾計算出此時容器中放什麼數據。
總結一下,主要的五個優化
-
將表格實現改爲其他元素標籤實現
-
僅渲染視窗可見的數據
-
進行函數節流
-
減少駐留的VNode和Vue組件,不使用顯示的子組件slot方式,改爲手動創建虛擬DOM來切斷對象引用
-
減少操作期間增加的對象,操作時組件必然會更新創建,可以減少組件中子組件的數量