前端懶載入以及預載入

懶載入（延遲載入）：延遲載入或符合某些條件時才載入某些。

兩種技術的本質：兩者的行為是相反的，乙個是提前載入，乙個是遲緩甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用，預載入則會增加伺服器前端壓力。

1.懶載入：

懶載入也叫延遲載入，指的是長網頁中延遲載入影象，是一種很好優化網頁效能的方式。

使用者滾動到他們之前，可視區域外的影象不會被載入，在長頁面上使用延遲載入使網頁載入更快。在某些情況下，它還可以幫助減少伺服器負載。常適用很多，頁面很長的電商**場景中。

這樣做能防止頁面一次性向伺服器響應大量請求導致伺服器響應慢，頁面卡頓或崩潰等問題。

意義：

（1）能提公升使用者體驗，當使用者開啟長頁面時，如果頁面上的所有都需要載入，由於數目較大，等待時間很長，嚴重影響使用者體驗。

（2）減少請求次數或延遲請求次數

（3）防止併發載入的資源過多會阻塞js的載入，影響**的正常使用。

懶載入的原理：

1.第一種是純粹的延遲載入，使用settimeout或setinterval進行載入延遲。

2.首先將頁面上的的src屬性設定為空字串，而的真實路徑則設定在data-original屬性中。判斷元素是否在可視區內

當頁面滾動的時候去監聽scroll事件，在scroll事件的**中，判斷我們懶載入的是否進入可視區域，如果在可視區域將的src屬性設定為data-original的值，這樣就實現了延遲載入。

function lazyload()
}}window.onload=lazyload;
window.onscroll=lazyload;

2.預載入：

資源預載入是另一種效能優化技術，我們可以應用該技術來預先告知瀏覽器某些資源可能在將來會被使用到。預載入簡單來說就是將所需的資源提前請求載入到本地，這樣後面需要用到的時候就會直接從快取中取資源。

為什麼要用預載入：

在網頁全部加在之前，對一些主要的內容進行載入，以提供給使用者更好的體驗，減少等待時間。否則對於乙個頁面內容過於龐大，沒有使用預載入技術的頁面就會長時間的展現為一片空白，直到所有的內容載入完畢。

意義：犧牲伺服器前端效能，換取更好的使用者體驗，這樣可以使使用者的操作得到最快的反映。

實現方式：

（1）可以用css(background)、js(image)、html(

)都可以。

（2）使用image物件。

常用的是new image();設定其src來實現預載，再使用onload方法**預載完成事件。

懶載入和預載入懶載入的原理及實現處理預載入時設定img 的src 屬性和img 的onload 事件的位置前後順序關係關於的預載入,你所不知道的載入的過程是非同步的一懶載入介紹目的二預載入介紹目的這對畫廊及佔據很大比例的來說十分有利，它保證了快速無縫地發布，也可幫助使用...

懶載入通過監聽scroll事件，判斷進入可視區域之後請求資源對於電商等很多，頁面很長的業務場景適用減少無效資源的載入併發載入的資源過多會阻塞js的載入，影響的正常使用可以使用原生js或者引用zepto.min.js var viewheight document.documentelem...