懶加載和預加載

appetizerio 發布于2019-08-29 16:57 / 2370人閱讀

摘要：使用默認是對象，如果是是指使用標簽，可以跨域，三懶加載和預加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。

一、懶加載 1.什么是懶加載

懶加載也叫延遲加載，指的是在長網頁中延遲加載圖像，是一種很好優化網頁性能的方式。用戶滾動到它們之前，可視區域外的圖像不會加載。這與圖像預加載相反，在長網頁上使用延遲加載將使網頁加載更快。在某些情況下，它還可以幫助減少服務器負載。常適用圖片很多，頁面很長的電商網站場景中。

2.為什么要用懶加載

能提升用戶的體驗，不妨設想下，用戶打開像手機淘寶長頁面的時候，如果頁面上所有的圖片都需要加載，由于圖片數目較大，等待時間很長，用戶難免會心生抱怨，這就嚴重影響用戶體驗。

減少無效資源的加載，這樣能明顯減少了服務器的壓力和流量，也能夠減小瀏覽器的負擔。

防止并發加載的資源過多會阻塞js的加載，影響網站的正常使用。

3.懶加載的原理

首先將頁面上的圖片的 src 屬性設為空字符串，而圖片的真實路徑則設置在data-original屬性中，
當頁面滾動的時候需要去監聽scroll事件，在scroll事件的回調中，判斷我們的懶加載的圖片是否進入可視區域,如果圖片在可視區內將圖片的 src 屬性設置為data-original 的值，這樣就可以實現延遲加載。

4.懶加載實現步驟



    
    Lazyload

二、預加載 1.什么是預加載

資源預加載是另一個性能優化技術，我們可以使用該技術來預先告知瀏覽器某些資源可能在將來會被使用到。預加載簡單來說就是將所有所需的資源提前請求加載到本地，這樣后面在需要用到時就直接從緩存取資源。

2.為什么要用預加載

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

3.實現預加載的幾種辦法

使用HTML標簽

使用Image對象

//myPreload.js文件
var image= new Image()
image.src="http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg"

使用XMLHttpRequest對象,雖然存在跨域問題，但會精細控制預加載過程

var xmlhttprequest=new XMLHttpRequest()；
xmlhttprequest.onreadystatechange=callback；
xmlhttprequest.onprogress=progressCallback；
xmlhttprequest.open("GET","http://image.baidu.com/mouse,jpg",true）；
xmlhttprequest.send()；
function callback(){
  if(xmlhttprequest.readyState==4&& xmlhttprequest.status==200){
    var responseText=xmlhttprequest.responseText；
  }else{
     console.log("Request was unsuccessful:"+xmlhttprequest.status）；
  }
}
function progressCallback(e){
e=e || event；
if(e.lengthComputable){
console.log("Received"+e.loaded+"of"+e.total+"bytes")
}
}

使用PreloadJS庫

PreloadJS提供了一種預加載內容的一致方式，以便在HTML應用程序中使用。預加載可以使用HTML標簽以及XHR來完成。默認情況下，PreloadJS會嘗試使用XHR加載內容，因為它提供了對進度和完成事件的更好支持，但是由于跨域問題，使用基于標記的加載可能更好。

//使用preload.js
var queue=new createjs.LoadQueue()；//默認是xhr對象，如果是new createjs.LoadQueue(false)是指使用HTML標簽，可以跨域
queue.on("complete",handleComplete,this);
queue.loadManifest([
{id:"myImage",src:"http://pic26.nipic.com/20121213/6168183  0044449030002.jpg"},
{id："myImage2"，src:"http://pic9.nipic.com/20100814/2839526  1931471581702.jpg"}
])；
function handleComplete(){
  var image=queue.getResuLt("myImage");
  document.body.appendChild(image);
}

三、懶加載和預加載的對比

兩者都是提高頁面性能有效的辦法，兩者主要區別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。

如果覺得文章對你有些許幫助，歡迎在我的GitHub博客點贊和關注，感激不盡！

四、參考文章

詳解懶加載和預加載(js)

懶加載和預加載

云服務器 GPU云服務器懶加載懶加載異常 javascript懶加載懶加載session

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114005.html

懶加載和預加載

摘要：使用默認是對象，如果是是指使用標簽，可以跨域，三懶加載和預加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

Shonim 2019-08-02 11:41 評論0 收藏0
懶加載和預加載

摘要：使用默認是對象，如果是是指使用標簽，可以跨域，三懶加載和預加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...

hedzr 2019-08-23 12:19 評論0 收藏0
前端性能優化--懶加載和預加載

摘要：集合中有等屬性文檔各種高度視口的大小文檔的大小文檔的大小預加載標簽懶加載代碼實現 html Document css .image-item ...

loostudy 2019-08-23 15:27 評論0 收藏0
深度解析之異步加載和預加載

摘要：當然并不是所有的頁面需要用到的外部域名都需要做這樣的域名解析，瀏覽器默認會解析超鏈接屬性的里面的域名，并且你的網站域名還不能是，如果是，則需要設置請求頭或加入一段強制開啟域名解析的標簽。廢話：異步加載和預加載一直都是前端優化必備技能之一，今天我們就來深度解析一下常用的幾個關鍵點。異步加載廢話不多說，任何長篇大論的教程都抵不過一張清晰明了的高清大圖來得好： showImg(http...

qpal 2019-08-02 16:10 評論0 收藏0