所謂懶加載實際上非常簡單尖昏，只是在正常的img標(biāo)簽里用data-src代替真正的src蛙埂，這樣可以讓那些不用馬上加載的圖片图贸，先顯示為一個統(tǒng)一的加載圖室琢，然后監(jiān)聽滾輪的位置乾闰，當(dāng)滾輪到達了預(yù)期的位置之后，就用js獲取img標(biāo)簽的data-src然后填到src里盈滴，于是img標(biāo)簽就自動向后臺求請這張圖片的真正資源了涯肩，以實現(xiàn)一邊拖動一邊加載圖片的效果。
<img src="loading.gif" data-src="真正的圖片地址">
此功能一般用于同一個頁面內(nèi)有許多的圖片要加載巢钓。由于一個頁面同時向后臺發(fā)送的請求是有數(shù)量限制的(一般瀏覽器是4到8個病苗，IE67是2個)，所以如果頁面上有很多CSS症汹、JS硫朦、圖片資源，就會出現(xiàn)要加載很久才能展示頁面的情況背镇，懶加載就能有效緩解此問題咬展。
也由于以上原因，一直以來前端的解決方案除了上面所說的懶加載以外瞒斩，還有不少：如CSS破婆、JS的合并壓縮；小圖片都合到一張大圖里用定位來顯示; 以及用base64的格式轉(zhuǎn)化圖片等胸囱，都是通過減少請求數(shù)量的形式去解決問題的祷舀。此處用base64格式轉(zhuǎn)化圖片的方式能實現(xiàn)減少請求數(shù)量的效果是因為它會在HTML初始化時當(dāng)成HTML的一部成被傳輸?shù)娇蛻舳耍允歉鶫TML同一個請求的烹笔，它有個問題是無法被瀏覽器緩存裳扯，所以只適用于不常用的圖片，否則還是以正常的圖片格式比較好谤职，那可以利用瀏覽器的緩存饰豺，下次加載就不會那么慢了。
此處的緩存與html頁面緩存不同<html manifest="demo.appcache">柬帕，此處的緩存是瀏覽器的自發(fā)性行為哟忍，而manifest的緩存機制是主動的針對整個頁面的狡门，用于實現(xiàn)離線應(yīng)用。
manifest的值可以是絕對地址锅很，也可以是相對地址其馏，只要有這個屬性桂敛，頁面就會被緩存下來贷痪，與此同時，設(shè)置了manifest的頁面家厌，也就不用在后臺的manifest文件里設(shè)置此頁面為緩存了扔仓，但是同源下的緩存最大限制是5M褐奥。
后臺的manifest文件實際上是一個簡單的文本文件，它分三部分：
CACHE MANIFEST?- 在此標(biāo)題下列出的文件將在首次下載后進行緩存
NETWORK?- 在此標(biāo)題下列出的文件需要與服務(wù)器連接翘簇，且不會被緩存
FALLBACK?- 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時的回退頁面（比如 404 頁面）
例如：
CACHE MANIFEST
# 2018-06-01? v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.html
FALLBACK:
/html5/ /404.html
當(dāng)需要更新緩存時撬码，只需修改此manifest文件就行，修改注釋也會引起更新版保。
