如今為了提升應用性能，懶加載被廣泛使用于 Web 應用中。它幫助開發者減少網站加載時間，節省流量以及提升用戶體驗。

但懶加載的過度使用會給應用性能帶來負面影響。所以在這篇文章中，會詳述懶加載對性能的影響，來幫助你理解應該何時使用它。

什么是懶加載？

懶加載是一種常見的技術，通過按需加載資源來減少網頁的數據使用。

如今懶加載已經是一種 Web 標準，大部分的主流瀏覽器都支持通過 loading="lazy" 屬性使用懶加載。

// with img tag
<img  
  src="bits.jpeg"  
  loading="lazy"  
  alt="an image of a laptop"  
/>
// with IFrame
<iframe  
  src="about-page.html"  
  loading="lazy">
</iframe>

一旦啟用懶加載，只有當用戶滾動到需要該內容顯示的地方才會去加載。

懶加載肯定可以提升應用性能以及用戶體驗，這也是為什么它已成為開發者在開發應用時的首選優化措施。但懶加載并不總是保證提升應用性能。那么讓我們看看懶加載對性能的影響到底是什么。

懶加載對性能的影響

許多研究表明，開發者通過懶加載可以實現兩種優勢。

• 減少頁面加載時間（PLT）：通過延遲資源加載減少首屏頁面加載時間。
• 優化資源消耗：通過資源懶加載優化系統資源使用，這在內存以及處理能力較低的移動設備上效果比較好。

在另一方面，過度使用懶加載會對性能產生一些明顯的影響。

減慢快速滾動的速度

如果你有一個 Web 應用，比如在線商店，你需要讓用戶可以快速上下滾動以及導航。對這樣的應用使用懶加載會減慢滾動速度，因為我們需要等待數據加載完成。這會降低應用性能以及引發用戶體驗問題。

因為內容變化而導致的延遲

如果你還沒有為懶加載的圖片定義的 width 和 height 屬性，那么在圖片渲染過程中會出現明顯的延遲。因為資源在頁面初始化時沒有加載，瀏覽器不知道適用于頁面布局的內容尺寸。

一旦內容加載完成，而用戶滾動到特定視圖中，瀏覽器需要處理內容以及再一次改變頁面布局。這會使其他元素移位，也會帶來糟糕的用戶體驗。

內容緩沖

如果你在應用中使用非必要的懶加載，這會導致內容緩沖。當用戶快速向下滾動而資源卻還在下載中時會發生這種情況。尤其是帶寬連接較慢時會發生這種情況，這會影響網頁渲染速度。

應該何時使用懶加載

你現在肯定在想如何合理使用懶加載，使其發揮最大的效果從而創造更好的 Web 性能。下面的一些建議有助于找到最佳著手點。

1. 在正確的地方懶加載正確的資源

如果你有一個需要很多資源的冗長的網頁，那你可以考慮使用懶加載，但只能針對用戶視圖外或者被折疊的內容使用。

確保你沒有懶加載后臺任務執行所需的資源，比如 JavaScript 組件，背景圖片或者其他多媒體內容。而且，你一定不能延遲這些資源的加載。你可以使用谷歌瀏覽器的 Lighthouse 工具來檢查，識別那些可添加懶加載屬性的資源。

2. 懶加載那些不妨礙網頁使用的內容

懶加載最好是用于不重要的非必需的 Web 資源。另外，如果資源沒有像預期那樣懶加載，那么不要忘記錯誤處理和提供良好的用戶體驗。請注意，原生懶加載依然沒有被所有平臺和瀏覽器普遍支持。

而且，如果你在使用一個庫或者自定義的 JavaScript 腳本，那么這不會對所有用戶都生效。尤其，那些禁止 JavaScript 的瀏覽器會面臨懶加載技術上的問題。

3. 懶加載對搜索引擎優化（SEO）而言不重要的資源

隨著內容懶加載，網站將逐漸渲染，這也就是說，某些內容在首屏加載時并不可用。咋一聽，好像是懶加載有助于提升 SEO 網頁排名，因為它使頁面加載速度大大加快。

但如果你過度使用懶加載，會產生一些負面影響。當 SEO 索引時，搜索引擎爬行網站抓取數據以便索引頁面，但由于懶加載，網絡爬蟲無法獲取所有頁面數據。除非用戶與頁面進行互動，這樣 SEO 就不會忽略這些信息。

但作為開發者，我們并不希望 SEO 遺漏我們重要的業務數據。所以我建議不要將懶加載用在針對 SEO 的內容上，比如關鍵詞或者業務信息。

總結

懶加載可以提升網頁使用率以及性能，對 Web 開發者而言是一個稱手的工具。所謂“過度烹飪燒壞湯”，過度使用這項技術也會降低網站性能。

在這篇文章中，我們關注懶加載對性能的影響，通過幾個建議幫助你理解應該何時使用它。如果你謹慎的使用這項技術，明白何時何地使用它，你的網站會得到明顯的性能提升。希望你有從中得到有用的知識點，感謝閱讀！