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

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

什么是懶加載？

懶加載是一種常見(jiàn)的技術(shù)，通過(guò)按需加載資源來(lái)減少網(wǎng)頁(yè)的數(shù)據(jù)使用。

如今懶加載已經(jīng)是一種 Web 標(biāo)準(zhǔn)，大部分的主流瀏覽器都支持通過(guò) 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)用戶(hù)滾動(dòng)到需要該內(nèi)容顯示的地方才會(huì)去加載。

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

懶加載對(duì)性能的影響

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

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

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

減慢快速滾動(dòng)的速度

如果你有一個(gè) Web 應(yīng)用，比如在線商店，你需要讓用戶(hù)可以快速上下滾動(dòng)以及導(dǎo)航。對(duì)這樣的應(yīng)用使用懶加載會(huì)減慢滾動(dòng)速度，因?yàn)槲覀冃枰却龜?shù)據(jù)加載完成。這會(huì)降低應(yīng)用性能以及引發(fā)用戶(hù)體驗(yàn)問(wèn)題。

因?yàn)閮?nèi)容變化而導(dǎo)致的延遲

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

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

內(nèi)容緩沖

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

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

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

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

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

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

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

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

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

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

隨著內(nèi)容懶加載，網(wǎng)站將逐漸渲染，這也就是說(shuō)，某些內(nèi)容在首屏加載時(shí)并不可用。咋一聽(tīng)，好像是懶加載有助于提升 SEO 網(wǎng)頁(yè)排名，因?yàn)樗鬼?yè)面加載速度大大加快。

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

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

總結(jié)

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

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