A5dbe2dc02ba27cc4d0e7ad27e1a18d0 不少網站包含電腦王,都會在網頁當中埋入延遲載入的 JavaScript 程式碼,以便降低首次載入的圖片數量,加快網頁首次呈現時間。Google Chrome 已預定在 75 版本當中原生支援這項功能並自動啟動,包含 lazy image loading 和 lazy iframe loading。

網頁結構越來越複雜,需要載入的物件也越來越多,該如何降低首次連入網頁的延遲,對於使用者體驗影響不小。目前跨網頁瀏覽器的做法為埋入 1 小段 JavaScript 程式碼,延後載入顯示視區以外的物件,等到使用者滑動頁面,接近視區時才會向伺服器發出請求並下載,此種做法可有效降低首次進入網頁的載入時間。

Chrome 75 將原生支援 lazy loading,動動手也可以搶先試玩
▲lazy loading 不僅讓網頁顯示時間縮短,也可以減少一開始的資料傳輸量。

Google Chrome 網頁瀏覽器將從 75 版本號開始,原生支援 <img>、<picture> 裡的 srcset、<iframe> 等 lazy loading 延遲載入,無須另外透過撰寫 JavaScript 支援,原生處理速度更快。網頁開發者有 3 種選項,分別為 loading="lazy"、loading="eager"、loading="auto"。

loading="lazy" 就如同現在的處理方式,當使用者捲動網頁至接近視區時才會載入,loading="eager" 則是要求瀏覽器立即下載載入,loading="auto" 則是交由網頁瀏覽器自行決定載入時機點。由於 Google Chrome 預計是第一個導入原生 lazy loading 的網頁瀏覽器,若是網頁開發者欲達成跨瀏覽器相容性,則必須額外加入判斷語法 if ('loading' in HTMLImageElement.prototype),在 else{} 段落填入原本用以 lazy loading 的 JavaScript。

Chrome 75 將原生支援 lazy loading,動動手也可以搶先試玩
▲Google Chome 桌面版 73 版已加入 lazy image loading和lazy iframe loading 實驗性功能,於網址列鍵入 chrome://flags 即可找到。

lazy loading 還可以降低剛開始載入網頁的流量,因此 Google Chrome 這項功能一開始其實是從 Android 版本進行試驗,如今桌面版本也放在 chrome://flags 實驗功能選單當中,使用者可自行選擇是否先行開啟該功能。另外一家 Mozilla Firefox 目前僅支援新分頁內容的延遲載入,當使用者確實點擊新分頁使其顯示在最上層,才會開始載入該分頁內容,至於是否原生支援圖片或是 iframe 的延遲載入,目前並未有任何風聲傳出。

 

參考資料

Intent to Ship: Lazily load below-the-fold images and iframes

Native image lazy-loading for the web!

使用 Facebook 留言

發表回應

謹慎發言,尊重彼此。按此展開留言規則