懶加載就是將網(wǎng)站中的資源或?qū)ο蟪跏蓟七t到需要的時(shí)候。

通俗來說，就是將網(wǎng)頁上繁多的圖像的加載推遲到可視窗口才展示。這種懶加載通常也稱作“延遲加載”，能夠幫助網(wǎng)站提升性能和用戶體驗(yàn)。當(dāng)用戶在訪問一個(gè)網(wǎng)站頁面時(shí)，首先把網(wǎng)頁的圖片或者其他的元素替換成為一張內(nèi)存很小的圖片的路徑，俗稱為“占位圖”，當(dāng)這些圖片被滾動到網(wǎng)頁可視區(qū)域時(shí)，才將圖片顯示出來，這就是我們所講的懶加載。接下來5分鐘帶你詳細(xì)認(rèn)識一下懶加載。

使用原因？

懶加載多應(yīng)用于圖片較多的網(wǎng)站，因?yàn)檫@個(gè)屬于網(wǎng)站整體流量的重心。網(wǎng)站在進(jìn)行HTTP請求時(shí)，一次性加載網(wǎng)站所有的圖片，容易造成站點(diǎn)的帶寬擁擠，造成負(fù)荷，網(wǎng)站的響應(yīng)速度自然下降了，更談何用戶體驗(yàn)？選擇懶加載最核心的思想便是，當(dāng)用戶想要瀏覽那部分的網(wǎng)站內(nèi)容時(shí)，加載該部分的數(shù)據(jù)，如此一來，便能在一定程度上減緩服務(wù)器的壓力。

原理

使用懶加載，最典型的實(shí)現(xiàn)方式：先將需要懶加載的圖片的SRC屬性隱藏，將其中的SRC屬性鏈接到同一張“占位圖”，再將真正的圖片地址藏在自定義的標(biāo)簽屬性中，使用JS代碼監(jiān)聽圖片元素，當(dāng)窗口加載到圖片時(shí)，再將SRC屬性還給圖片，達(dá)到懶加載的目的。從技術(shù)層面來講，頁面上的圖片，倘若缺少SRC屬性，瀏覽器在發(fā)送請求時(shí)，便不會將其包含在內(nèi)，只有通過JS代碼為其再加上SRC屬性，才會請求下載圖片。

優(yōu)點(diǎn)

• 能夠提升用戶的訪問體驗(yàn)，減少等待加載的時(shí)間，避免了網(wǎng)站被拖慢的風(fēng)險(xiǎn)；
• 減少因?yàn)橐淮涡约虞d過多的資源文件而導(dǎo)致JS代碼的加載過慢，影響網(wǎng)站的加載速度；
• 當(dāng)用戶打開網(wǎng)站時(shí)，瀏覽器向服務(wù)器端發(fā)送HTTP請求，但是不需要請求懶加載的內(nèi)容，頁面啟動只加載網(wǎng)站首屏圖片，這樣做明顯減緩了服務(wù)器的壓力，減少資源的加載，減輕負(fù)擔(dān)。

懶加載&預(yù)加載

與懶加載恰恰相反，預(yù)加載卻是提前加載好網(wǎng)站圖片，將其緩存在本地中，當(dāng)用戶要查看時(shí)，便直接從本地文件中提取查看。這兩種技術(shù)的本質(zhì)上便是比一樣了，一個(gè)延遲加載，一個(gè)卻提前加載好，相應(yīng)地它們各自對服務(wù)器端的壓力也不同。懶加載的主要目的的優(yōu)化服務(wù)器的前端性能，減少發(fā)送的請求數(shù)量延緩壓力，而預(yù)加載則可以說得上是撿了芝麻丟掉西瓜，犧牲服務(wù)器的前端性能來換取更好的服務(wù)體驗(yàn)。

不過，使用預(yù)加載還是有好處的，至少喜歡逐一訪問的訪客會更喜歡這樣的網(wǎng)站。建議使用預(yù)加載的網(wǎng)站一定要使用最大承受能力的服務(wù)器，帶寬數(shù)據(jù)加大才能承受正常的預(yù)加載，這樣做的情況下預(yù)加載網(wǎng)站的唯一確定變成了：“貴”。

懶加載與CDN

懶加載和CDN技術(shù)，說到底其實(shí)是縮短網(wǎng)站頁面的加載時(shí)間，優(yōu)化用戶瀏覽網(wǎng)站的體驗(yàn)感的兩大方法。那說實(shí)在的，在前端性能優(yōu)化方面，兩者之間水平如何？

• 懶加載確實(shí)是在一定程度上減緩了服務(wù)器的壓力，避免了很多不必要的資源請求下載，但是倘若用戶進(jìn)行大量請求時(shí)，它也于事無補(bǔ)；
• CDN服務(wù)在緩存資源、提高用戶的網(wǎng)速這方面是一把好手，但是用戶不需要的資源也統(tǒng)統(tǒng)下載下來了。
• 其實(shí)較好的方法，便是將這兩者之間結(jié)合起來，擰成一股繩，在為網(wǎng)站提供CDN加速服務(wù)的同時(shí)，采用懶加載的方式，辯證統(tǒng)一，發(fā)揮最大效用。

總結(jié)

隨著網(wǎng)絡(luò)發(fā)展，網(wǎng)站上的圖片視頻的資源信息越來越多，數(shù)量大小都在逐漸增加。為此我們通過使用懶加載渲染網(wǎng)頁上不重要的資源。舉個(gè)懶加載非常實(shí)用的例子：當(dāng)我們在瀏覽電商網(wǎng)站時(shí)，圖片繁多，但是只有你在滑到的網(wǎng)頁位置，才將圖片給你展示完全。像這樣靈活運(yùn)用懶加載的網(wǎng)站，通常運(yùn)營起來也會更省心。