一、懶加載
1.什麼是懶加載
懶加載也叫延遲加載，指的是在長網頁中延遲加載圖像，是一種很好優化網頁性能的方式。使用者滾動到它們之前，可視區域外的圖像不會加載。這與圖像預加載相反，在長網頁上使用延遲加載将使網頁加載更快。在某些情況下，它還可以幫助減少伺服器負載。常适用圖檔很多，頁面很長的電商網站場景中。
2.為什麼要用懶加載
- 能提升使用者的體驗，不妨設想下，使用者打開像手機淘寶長頁面的時候，如果頁面上所有的圖檔都需要加載，由于圖檔數目較大，等待時間很長，使用者難免會心生抱怨，這就嚴重影響使用者體驗。
- 減少無效資源的加載，這樣能明顯減少了伺服器的壓力和流量，也能夠減小浏覽器的負擔。
- 防止并發加載的資源過多會阻塞js的加載，影響網站的正常使用。
3.懶加載的原理
首先将頁面上的圖檔的 src 屬性設為空字元串，而圖檔的真實路徑則設定在data-original屬性中，
當頁面滾動的時候需要去監聽scroll事件，在scroll事件的回調中，判斷我們的懶加載的圖檔是否進入可視區域,如果圖檔在可視區内将圖檔的 src 屬性設定為data-original 的值，這樣就可以實作延遲加載。
4.懶加載實作步驟
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lazyload</title>
<style>
.image-item {
display: block;
margin-bottom: 50px;
height: 200px;//一定記得設定圖檔高度
}
</style>
</head>
<body>
<img src="" class="image-item" lazyload="true" data-original="images/1.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/2.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/3.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/4.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/5.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/6.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/7.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/8.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/9.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/10.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/11.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/12.png"/>
<script>
var viewHeight =document.documentElement.clientHeight//擷取可視區高度
function lazyload(){
var eles=document.querySelectorAll（'img[data-original][lazyload]'）
Array.prototype.forEach.call(eles,function(item,index){
var rect
if(item.dataset.original==="")
return
rect=item.getBoundingClientRect()// 用于獲得頁面中某個元素的左，上，右和下分别相對浏覽器視窗的位置
if(rect.bottom>=0 && rect.top < viewHeight){
!function(){
var img=new Image()
img.src=item.dataset.original
img.onload=function(){
item.src=img.src
}
item.removeAttribute（"data-original"）//移除屬性，下次不再周遊
item.removeAttribute（"lazyload"）
}()
}
})
}
lazyload()//剛開始還沒滾動螢幕時，要先觸發一次函數，初始化首頁的頁面圖檔
document.addEventListener（"scroll"，lazyload)
</script>
</body>
</html>
二、預加載
1.什麼是預加載
資源預加載是另一個性能優化技術，我們可以使用該技術來預先告知浏覽器某些資源可能在将來會被使用到。預加載簡單來說就是将所有所需的資源提前請求加載到本地，這樣後面在需要用到時就直接從緩存取資源。
2.為什麼要用預加載
在網頁全部加載之前，對一些主要内容進行加載，以提供給使用者更好的體驗，減少等待的時間。否則，如果一個頁面的内容過于龐大，沒有使用預加載技術的頁面就會長時間的展現為一片空白，直到所有内容加載完畢。
3.實作預加載的幾種辦法
- 使用HTML标簽
<img src="http://pic26.nipic.com/20121213/6168183 0044449030002.jpg" style="display:none"/>
- 使用Image對象
<script src="./myPreload.js"></script>
//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);
}
三、懶加載和預加載的對比
兩者都是提高頁面性能有效的辦法，兩者主要差別是一個是提前加載，一個是遲緩甚至不加載。懶加載對伺服器前端有一定的緩解壓力作用，預加載則會增加伺服器前端壓力。
如果想了解更多頁面性能優化的辦法，請猛戳
頁面性能優化辦法有哪些四、參考文章
詳解懶加載和預加載(js) 懶加載和預加載原文釋出時間為：2018年05月29日
原文作者：浪裡行舟
本文來源：
掘金 https://juejin.im/entry/5b3a29f95188256228041f46如需轉載請聯系原作者
![2020天貓雙十一成交總額預計達到多少億呢?[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)