解決滾動元素內有大量dom,造成卡頓問題的方案
下面這幾種滾動場景,都有可能造成卡頓:
- 滾動載入,出現無限滾動時,可能給dom過多頁面卡死
- 滾動載入的元件,dom過多,銷燬元件的時候也會出現卡死
- 任何滾動的元素,內部元素過多,都會出現卡頓現象
針對上面的問題,我們能否有什麼優化的方案?
任何滾動的dom元素中只展示 可視區域展示 的功能。如下圖:
- 外元素滾動時,在非可視區域的dom,都暫時轉存到記憶體的文件碎片中
- 為了防止抖動,用一個空的節點佔位,因為是空節點,沒什麼層級關係,造成卡頓的問題明顯降低
實現後的效果如下圖,非可是區域,只有一個空的dom佔位: 實現的dome效果線上檢視