過去, 我們對含有大量圖片的網站進行優化無外乎要依靠JS邏輯或是相關外掛來完成, 比如懶載入技術. 而現在(至少在不久的將來), Chrome 75版本將增加原生懶載入功能.
直接開始使用
當然, 你也可以現在就開始體驗這一功能, 在瀏覽器的標籤欄輸入browser://flags/#enable-lazy-image-loading並進入頁面, 找到enable-lazy-image-loading這一項開啟它, 重啟後即可使用.
標準之下
有關loading的使用, 我相信你想知道更多, 你可以使用以下三個屬性來定義瀏覽器載入行為:
- lazy: 使用懶載入, 當螢幕滾動到圖片附近時
- eager: 立即載入圖片
- auto: 由瀏覽器自行決定
有關懶載入的討論, 你可以通過這個issue進一步探索.
開始使用新程式碼
也許你想把這一特徵立即運用到你的專案中, 但是你別忘了至少目前為止他還是實驗性的功能, 所以需要做功能檢測, 對不支援的瀏覽器進行相容:
僅僅這樣還不夠, 為了不使你的Image標籤被不支援loading屬性的瀏覽器立即載入出來, 你還需要把src屬性替換為其它屬性, 同時還得考慮瀏覽器不支援JS的情況, 比如像這樣做:
拋棄非原生懶載入?
拋棄非原生懶載入? 答案在任何情況下都是否.
如果未來瀏覽器都支援懶載入, 並且標準較現在沒有改變的話, 它只適用於一些簡單的網頁瀏覽場景, 比如像掘金這種文字和圖片混排的頁面.對於特殊場景下, 比如這位老哥的這篇文章裡描繪的問題, 我們還是得需要根據需求, 書寫大量原生JS邏輯.除非問題本質得到解決, 否者任何在體驗上的優化, 都是優化一部分場景的效能, 而放棄另一部分場景的效能(甚至負優化)
最後
文中程式碼圖片是使用Carbon合成的, 掘金的程式碼高亮實在是... 麼得辦法~~