問題
在某些情況下，依據某些頁面需要一次顯示大量的資料 ，使用者也不希望分頁，但因為資料量大太，渲染及執行過程中，瞬間造成瀏覽器卡頓或不回應。
主因
從上面的例子，經過反覆調查研究得知
- 頁面的卡頓是由於同時渲染大量DOM所引起的。
- 過多的 DOM 同時出現在一個頁面，電腦或手機效能不好時，也會卡頓。
- 因為我們前端框架採用 Vue ，渲染越多的元件，則會產生越多的 Virtual DOM，當資料變動時，也可能觸發元件的重新渲染。
解決方法
1.分時渲染 - 頁面的卡頓是由於同時渲染大量DOM所引起的，所以我們透過 setTimeout 將渲染過程分批進行渲染。
- 缺點使用 setTimeout 頁面加載的時間已經非常快了，但每次刷新時可以很快的看到第一屏的所有數據，但是當我們快速滾動頁面的時候，會發現頁面出現閃屏或白屏的現象。
2.捲動式渲染(Lazylading Rendering) - 依據每次捲動軸捲動去多渲染幾筆資料。
- Lazy loading 不等於 虛擬列表/虛擬捲軸，虛擬列表每次只會渲染可視範圍的筆數。
- 當資料筆數過多時，會渲染過多的 DOM，也會造成瀏覽器卡頓。
- 明明是一千筆資料，因為捲軸往下捲才長出捲軸，捲軸 bar 比例顯示比例不正常，也不好捲動
3.分段渲染 - 依據資料筆數及高度長出，虛擬捲軸Bar，依可視範圍做渲染，超出可視範圍的就不渲染額外的 DOM 了，有整理了一下，如果要分段捲動有那些方法
- Clusterize.js 套件
- 虛擬滾動(Vue-virtual-scroller) 套件
- Vue 虛擬列表元件 範例連結
- 自己做分頁元件渲染
心得
依據我們當時的情境，是比分網站，客戶不希望分頁，一次需要顯示1000~2000筆的比賽資料，依情境最後推薦的做法是分段渲染。
無限捲動的議題，前端有一陣子很流行無限捲動，其實不適合大部份的情境，可能很適合社群網站，但不適合一般情境，至今採用無限捲動的網站變少了。
- 使用者不容易找到目標
- 不利於無障礙
- 不利於SEO
- 回上一頁偏移位置
補充
1.額外優化渲染的議題
- 無限捲動是縮減物件的大小，去除不需要的屬性 ( Limit unnecessary data passing )
- 過濾掉不需要的資料
- Render Once - 假設Component其中一個內容不會變更資料，可以用v-once指令，只針對那個內容僅渲染一次。
參考資料
Related Posts
