js中的預加載與懶加載（延遲加載）

  js中加載分兩種：預加載與延遲加載

  1、  預加載，加強用戶的體驗，但會加載服務器的負擔。通常會使用多種 CSS(background)、JS(Image)、HTML(<img />) 。

        一、什麼是預加載

             提早加載圖片，當用戶須要查看時可直接從本地緩存中渲染

        二、實現預加載的方法

              a、單純的css 實現

                   可經過CSS的background屬性將圖片預加載到屏幕外的背景上。只要這些圖片的路徑保持不變，當它們在Web頁面的其餘地方被調用時，瀏覽器就會在渲染過程當中使用預加載（緩存）的圖片。簡單、高效，不須要任何JavaScript。

             

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; } 

              b、單純的js預加載圖片

                 

<div class="hidden">  
    <script type="text/javascript">  
        <!--//--><![CDATA[//><!--  
            var images = new Array()  
            function preload() {  
                for (i = 0; i < preload.arguments.length; i++) {  
                    images[i] = new Image()  
                    images[i].src = preload.arguments[i]  
                }  
            }  
            preload(  
                "http://domain.tld/gallery/image-001.jpg",  
                "http://domain.tld/gallery/image-002.jpg",  
                "http://domain.tld/gallery/image-003.jpg"  
            )  
        //--><!]]>  
    </script>  
</div>

 

           c、使用ajax實現預加載

            

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a JS and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.css');  
        xhr.send('');  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000);  
};

參考網址：http://web.jobbole.com/86785/

 

　　2、延遲加載（懶加載）

          一、什麼是懶加載

               懶加載又稱延遲加載。

               當訪問一個頁面時，先把img元素或者其餘元素的背景圖片替換成一張大小1*1px圖片的路徑（只須要請求一次的佔位圖），只有當圖片出如今瀏覽器的可視區域內時，才設置圖片真正的路徑，讓圖片顯示出來，這就是圖片的懶加載。

          二、懶加載的實現原理

                頁面中img元素，若是沒有src屬性，瀏覽器就不會發出請求去下載圖片，只有經過js設置圖片路徑，瀏覽器纔會發送請求；

                懶加載的原理是先在頁面中把全部的圖片統一使用一張佔位圖進行佔位，把真正的路徑存在元素的‘data-url’屬性中，要使用的時候，在設置。

         三、懶加載的實現步驟

              1)首先，不要將圖片地址放到src屬性中，而是放到其它屬性(data-original)中。
              2)頁面加載完成後，根據scrollTop判斷圖片是否在用戶的視野內，若是在，則將data-original屬性中的值取出存放到src屬性中。
              3)在滾動事件中重複判斷圖片是否進入視野，若是進入，則將data-original屬性中的值取出存放到src屬性中。

         四、懶加載的優勢

              頁面加載速度快、能夠減輕服務器的壓力、節約了流量,用戶體驗好

 

           3、懶加載與預加載的對比

               一、概念

                   懶加載也叫延遲加載：js圖片延遲加載，延遲加載圖片或者符合某些條件是才加載某些圖片；

                   預加載：提早加載圖片，當用戶須要查看時可直接從本地緩存中渲染。（base64小圖片能夠經過css保存）

                二、區別

                  兩種技術的本質：二者的行爲相反，一個是提早加載，一個是遲緩甚至不加載。懶加載會對前端有必定的緩解壓力做用，預加載則會增長前端的壓力。

                三、懶加載的意義及實現方式：

                     懶加載的主要目的是優化前端性能，減小請求數或延遲請求數。

                    方法：

                       a、純粹的延遲加載，使用setTimeOut或者setInterval 進行加載延遲；

                       b、條件加載，符合某些條件，或者觸發了某些事件纔開始異步下載；

                       c、可視區加載，即僅加載能夠看到的區域，監控滾動條實現。

                四、預加載的意義及實現方式

                     預加載是犧牲前端性能，換取用戶體驗，使用戶的操做獲得最快的反映。

                    方法：

                   好比：用CSS和JavaScript實現預加載；僅使用JavaScript實現預加載；使用Ajax實現預加載。

                  經常使用的是new Image();設置其src來實現預載，再使用onload()方法回調預加載完成事件。只要瀏覽器吧圖片下載到本地，src就會使用緩存，這是最基本的預加載方法。當image下載完圖片後，會獲得寬和高，所以能夠在預加載錢獲得圖片的大小(方法是用記時器輪循寬高變化)。

 

function loadImage(url,callback) {
    var img = new Image();
    
    img.src = url;
 
    if(img.complete) {  // 若是圖片已經存在於瀏覽器緩存，直接調用回調函數
        
        callback.call(img);
        return; // 直接返回，不用再處理onload事件
    }
 
    img.onload = function(){
        img.onload = null;
        callback.call(img);
    }
}

 

                     參考網址：https://blog.csdn.net/YiDaShi33/article/details/54316126

 

 4、vue中的懶加載

        vue中的延遲加載是經過webpack代碼拆分組件實現的。

         在vue中，有3塊不一樣的延遲加載和代碼拆分，使用動態導入：

            a、組件，又稱爲異步組件

            b、路由器

            c、vuex模塊

     一、 vue組件的延遲加載

            經過將import函數包裝到箭頭函數中，Vue將僅在請求時執行它，並在該時刻加載模塊。

Vue.component('AsyncCmp', () => import('./AsyncCmp'))

 

    二、vue路由器中的延遲加載

          vue路由器內置支持延遲加載。假設咱們想在/login 路由中延遲加載一個Lgin 組件

// Instead of: import Login from './login'
const Login = () => import('./login')

new VueRouter({
  routes: [
    { path: '/login', component: Login }
  ]
})

   

   三、延遲加載vuex模塊

         Vuex有一種registerModule方法可讓咱們動態建立Vuex模塊。

          

const store = new Vuex.Store()

...

// Assume there is a "login" module we wanna load
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})

 

 參考網址：https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/