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

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

實現的dome效果在線查看

代碼git地址

下面這幾種滾動場景，都有可能形成卡頓：

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

針對上面的問題，咱們可否有什麼優化的方案？

任何滾動的dom元素中只展現 可視區域展現 的功能。以下圖：

• 外元素滾動時，在非可視區域的dom，都暫時轉存到內存的文檔碎片中
• 爲了防止抖動，用一個空的節點佔位，由於是空節點，沒什麼層級關係，形成卡頓的問題明顯下降

具體實現能夠代碼git地址，代碼裏註釋比較清晰了

實現後的效果以下圖，非但是區域，只有一個空的dom佔位： 實現的dome效果在線查看