Docker
Network
RxJS
Nginx
TypeScript
Data Structure And Algorithm
JavaScript
PostgreSQL
React
GitJavaScript 筆記：Intersection Observer API
提升使用者體驗
當使用者打開網頁時，瀏覽器會一次把所有內容都載入。如果頁面上有很多圖片，載入速度就會變慢，讓使用者等很久。如果我們能先顯示重要的內容（像是文字），等使用者滑到圖片時再載入圖片，就能大幅縮短等待時間，讓網頁看起來更快。
以前我們會用 addEventListener() 監聽 scroll 事件，再用 getBoundingClientRect() 來判斷元素有沒有進入畫面。下面的程式碼就是這種做法。不過，每次滾動都會觸發 callback function，還要一直重新計算位置，這樣會拖慢網頁速度，影響體驗。為了解決這個問題，才有了 Intersection Observer API。
認識 Intersection Observer API
Intersection Observer API 可以讓我們在網頁捲動時，偵測某個元素有沒有進入畫面，常用來做圖片延遲載入（Lazy Loading）、無限捲動（Infinite Scroll）等功能，讓網頁更快更順。使用時，只要用 IntersectionObserver() 建立一個觀察器，傳入兩個參數：第一個是回呼函式（當元素進入或離開畫面時會執行），第二個是設定選項（object 物件）。設定裡的 root 預設是 null，代表以瀏覽器畫面（viewport）為基準，也可以改成某個父元素；threshold 決定元素進入多少比例時觸發回呼，例如 0.5 就是一半進入時觸發；rootMargin 則可以調整觀察範圍，像是加大或縮小邊界。
- root：觀察範圍，預設為 viewport。
- threshold：觸發比例，例如
0.5表示當元素有一半進入 viewport 時觸發。 - rootMargin：可調整觸發範圍，例如
'10px'可擴大觀察邊界。
Reveal Section DEMO
Codepen 範例：透過 Intersection Observer，隨著滾動逐一顯示區塊。
Lazy Loading DEMO
Codepen 範例：先顯示低解析度圖片，待進入 viewport 後再載入清晰版本。
Infinite Scroll
若頁面含有龐大資訊量（如 Unsplash 圖庫），可透過 Intersection Observer 實現 Infinite Scroll。當使用者滾動至底部時，再動態載入更多內容，而非一次渲染所有資料。
範例可見 Codepen。
一般而言，若網頁資訊量過多的情況下，通常會透過分頁 (page 1, page 2...) 來做內容的切割，倘若是屬於 UNSPLASH 這種免費相面共享網站，會希望使用者在同一個頁面利用滾輪就可以瀏覽大量的圖庫，然而大量的圖片資訊若要一次渲染給使用者會需要耗費大量的時間，因此會透過 Intersection Observe API 做到分批渲染的功能，待瀏覽者滑動到頁面最底部時，再渲染新的資訊出來，如 Codepen所呈現的 。