前端優化——預加載篇

預加載

---

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)

懶加載和預加載