認識 Intersection Observer API：實作 Lazy Loading 和 Infinite Scroll

當我們希望在瀏覽器上一次渲染很多的內容時 — 無論頁面上含有大量的圖片，或要透過 canvas 呈現多組圖表 — 效能總是一大考驗（在實作前總會提心吊膽的，想說瀏覽器能不能撐得住！即使撐住了，也會想一下說使用者體驗會不會很差 😱）

常見優化方式

Lazy Loading 和 Infinite Scroll 是常見的優化方式，簡單的介紹一下：

Lazy Loading

在頁面讀取的時候，會將相對不重要的資源延後載入，藉以讓使用者能更快看到重要內容。隨著使用者滑動頁面時，再適時的把需要的內容載進來。

以下面 CNN 的首頁舉例：整個頁面其實很長，需要往下滑好幾輪才能讀完所有內容，這些內容中包含了非常多的圖片，如果在使用者剛進到頁面就要把包含圖片的所有內容都載入和渲染出來，等待時間可能需要很久（如果在網速慢的地區，那使用者豈不是等到天荒地老才能看到內容！）

另一方面，很多使用者其實不會讀完頁面上所有的內容 — 反而是看到有興趣的文章，就點進去觀看 — 也因此再往下走的圖片其實都沒有被使用者看到，無需花時間和精力載入。👉「透過延遲，在需要時才載入所需資源，儘量不耽誤頁面內容的初次呈現，提升使用者體驗」

Infinite Scrolling

隨著使用者滑動頁面，將更多的內容載入 — 類似分頁的功能，但使用者不需要自行切換頁面。

以下面 Medium 的首頁舉例：當使用者到訪時，我們不需要因為害怕使用者可能會想要看到多篇主題，而一次向後端取得 100 篇文章 — 除了抓資料、傳輸資料、渲染等都需要時間和消耗效能外，使用者可能看到第五篇就離開當前頁面了，後面的 95 篇豈不是白抓了！更好的做法就是批次載入 — 一次抓個十筆（舉例），當使用者有興趣，就會繼續往下滑，當滑到特定位置時，我們再為使用者加載下十筆 — 如此一來能為前後端有效降低負擔，使用者也能順暢地往下不斷看到新內容，體驗更佳！