一轮听、懶加載
1.什么是懶加載
懶加載也叫延遲加載吸重，指的是在長網(wǎng)頁中延遲加載圖像，是一種很好優(yōu)化網(wǎng)頁性能的方式怪瓶。用戶滾動到它們之前萧落，可視區(qū)域外的圖像不會加載。這與圖像預加載相反洗贰，在長網(wǎng)頁上使用延遲加載將使網(wǎng)頁加載更快找岖。在某些情況下，它還可以幫助減少服務器負載敛滋。常適用圖片很多许布，頁面很長的電商網(wǎng)站場景中。
2.為什么要用懶加載
能提升用戶的體驗绎晃，不妨設想下蜜唾，用戶打開像手機淘寶長頁面的時候，如果頁面上所有的圖片都需要加載庶艾，由于圖片數(shù)目較大灵妨，等待時間很長，用戶難免會心生抱怨落竹，這就嚴重影響用戶體驗泌霍。
減少無效資源的加載，這樣能明顯減少了服務器的壓力和流量述召，也能夠減小瀏覽器的負擔朱转。
防止并發(fā)加載的資源過多會阻塞js的加載，影響網(wǎng)站的正常使用.
3.懶加載的原理
首先將頁面上的圖片的 src 屬性設為空字符串积暖，而圖片的真實路徑則設置在data-original屬性中藤为，
當頁面滾動的時候需要去監(jiān)聽scroll事件，在scroll事件的回調(diào)中夺刑，判斷我們的懶加載的圖片是否進入可視區(qū)域,如果圖片在可視區(qū)內(nèi)將圖片的 src 屬性設置為data-original 的值缅疟，這樣就可以實現(xiàn)延遲加載分别。
4.懶加載實現(xiàn)步驟
<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????//獲取可視區(qū)高度
????????????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()//剛開始還沒滾動屏幕時，要先觸發(fā)一次函數(shù)桅咆，初始化首頁的頁面圖片
????????document.addEventListener（"scroll"括授，lazyload)
????</script>
????</body>
</html>
二、預加載
1.什么是預加載
資源預加載是另一個性能優(yōu)化技術岩饼，我們可以使用該技術來預先告知瀏覽器某些資源可能在將來會被使用到荚虚。預加載簡單來說就是將所有所需的資源提前請求加載到本地，這樣后面在需要用到時就直接從緩存取資源籍茧。
2.為什么要用預加載
在網(wǎng)頁全部加載之前版述，對一些主要內(nèi)容進行加載，以提供給用戶更好的體驗寞冯，減少等待的時間渴析。否則，如果一個頁面的內(nèi)容過于龐大简十，沒有使用預加載技術的頁面就會長時間的展現(xiàn)為一片空白檬某，直到所有內(nèi)容加載完畢。
3.實現(xiàn)預加載的幾種辦法
使用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提供了一種預加載內(nèi)容的一致方式恢恼，以便在HTML應用程序中使用。預加載可以使用HTML標簽以及XHR來完成胰默。默認情況下场斑，PreloadJS會嘗試使用XHR加載內(nèi)容，因為它提供了對進度和完成事件的更好支持牵署，但是由于跨域問題漏隐，使用基于標記的加載可能更好。
//使用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);
}
三取具、懶加載和預加載的對比
兩者都是提高頁面性能有效的辦法脖隶，兩者主要區(qū)別是一個是提前加載，一個是遲緩甚至不加載暇检。懶加載對服務器前端有一定的緩解壓力作用产阱，預加載則會增加服務器前端壓力。
