滾動優化(無限滾動載入、滾動元素內有大量dom,造成卡頓問題的優化方案)

sandq發表於2018-02-01

解決滾動元素內有大量dom,造成卡頓問題的方案

實現的dome效果線上檢視

程式碼git地址

下面這幾種滾動場景,都有可能造成卡頓:

  • 滾動載入,出現無限滾動時,可能給dom過多頁面卡死
  • 滾動載入的元件,dom過多,銷燬元件的時候也會出現卡死
  • 任何滾動的元素,內部元素過多,都會出現卡頓現象

針對上面的問題,我們能否有什麼優化的方案?

任何滾動的dom元素中只展示 可視區域展示 的功能。如下圖:

  • 外元素滾動時,在非可視區域的dom,都暫時轉存到記憶體的文件碎片中
  • 為了防止抖動,用一個空的節點佔位,因為是空節點,沒什麼層級關係,造成卡頓的問題明顯降低

具體實現可以程式碼git地址,程式碼裡註釋比較清晰了

此處輸入圖片的描述

實現後的效果如下圖,非可是區域,只有一個空的dom佔位: 實現的dome效果線上檢視

此處輸入圖片的描述

相關文章