如今為了提升應(yīng)用性能，懶加載被廣泛使用于 Web 應(yīng)用中。它幫助開發(fā)者減少網(wǎng)站加載時間，節(jié)省流量以及提升用戶體驗。

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

什么是懶加載？

懶加載是一種常見的技術(shù)，通過按需加載資源來減少網(wǎng)頁的數(shù)據(jù)使用。

如今懶加載已經(jīng)是一種 Web 標(biāo)準(zhǔn)，大部分的主流瀏覽器都支持通過 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>

一旦啟用懶加載，只有當(dāng)用戶滾動到需要該內(nèi)容顯示的地方才會去加載。

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

懶加載對性能的影響

許多研究表明，開發(fā)者通過懶加載可以實現(xiàn)兩種優(yōu)勢。

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

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

減慢快速滾動的速度

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

因為內(nèi)容變化而導(dǎo)致的延遲

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

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

內(nèi)容緩沖

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

應(yīng)該何時使用懶加載

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

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

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

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

2. 懶加載那些不妨礙網(wǎng)頁使用的內(nèi)容

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

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

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

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

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

但作為開發(fā)者，我們并不希望 SEO 遺漏我們重要的業(yè)務(wù)數(shù)據(jù)。所以我建議不要將懶加載用在針對 SEO 的內(nèi)容上，比如關(guān)鍵詞或者業(yè)務(wù)信息。

總結(jié)

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

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