虛擬滾動實現一次vue長列表的內存性能分析和優化

原理:這種方案的原理是使用一個大容器作爲滾動區域,裏面有一個內容區域,JS通過數據數量和每條數據的高度計算出內容區的高度,內容區用padding或絕對定位撐開滾動區域,讓容器可滾動,另外就是數據項了,滾動的時候,計算當前滾動位置scrollTop,再從數據項中找出各項的高度,從頭到尾計算出此時容器中放什麼數據。
總結一下,主要的五個優化

  1. 將表格實現改爲其他元素標籤實現

  2. 僅渲染視窗可見的數據

  3. 進行函數節流

  4. 減少駐留的VNode和Vue組件,不使用顯示的子組件slot方式,改爲手動創建虛擬DOM來切斷對象引用

  5. 減少操作期間增加的對象,操作時組件必然會更新創建,可以減少組件中子組件的數量

記一次vue長列表的內存性能分析和優化

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章