（二十七）懶加載和預加載最簡單demo演示

demo源碼github地址

懶加載：是指在資源需要的時候纔去用js加載資源;一般不是首屏要看到的；非核心功能的懶加載，按需加載

預加載：是指在加載完成之後纔對用戶進行顯示

懶加載demo
注意：用chrome瀏覽器打開控制檯；選擇network；將速度改爲Slow 3G；然後再刷新看效果，注意清除瀏覽器緩存後再刷新看效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>懶加載(smileyqp.com)</title>
</head>
<body>
    <h1>一個懶加載的demo</h1>
    <p>可以用chrome瀏覽器打開控制檯；選擇network；將速度改爲Slow 3G；然後再刷新看效果，注意清除瀏覽器緩存後再刷新看效果</p>
    <button id='test'>按需加載</button>
    <script>
        /**
        * 懶加載：是指在資源需要的時候纔去用js加載資源;一般不是首屏要看到的；非核心功能的懶加載，按需加載
        * 預加載：是指在加載完成之後纔對用戶進行顯示
        * 圖片不會阻塞dom渲染之喲普script標籤會阻塞dom渲染
        */
        var imgarr = [
            'http://www.sz.gov.cn/cn/xxgk/zfxxgj/tpxw/201905/W020190508355754728261.jpg',
            'http://www.sz.gov.cn/cn/xxgk/zfxxgj/tpxw/201910/W020191015381074459750.jpg'
            ]
        var jsarr = [
            'https://code.jquery.com/jquery-3.1.1.min.js',
            'http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js'
        ];
        function lazyloader(url,type,target){
            if(!url) throw new Error('the first arguments ,url, is not given');
            if(!type) throw new Error('the second arguments ,type, is not given');
            var target = target || document.body;               //這裏的target不是必須的但是之後會要用到。設置默認參數
            var cator = {                               //算法(命令)模式對象；分別創建img和js資源
                img:function(){
                    var img = new Image();
                    return img;             //返回的是dom對象
                },
                js:function(){
                    var script = document .createElement('script');
                    return script;             //返回的是dom對象
                }
            }

            if(typeof url == 'String'){                 //單個資源的懶加載；判斷參數類型；判斷是否單一資源;
                var dom = cator[type]();                //這裏省去了複雜的分支判斷；即上面的命令模式對象判斷是js還是img的懶加載
                dom.src = url;
                target.appendChild(dom);
            }else{
                url.forEach(function(item,index){       //多個資源的懶加載
                    var dom = cator[type]();
                    dom.src = item;
                    target.appendChild(dom);
                });
            }
        } 
        //實現其他資源加載完成後在加載圖片以及js資源；懶加載
        window.onload = function(){
            lazyloader(imgarr,'img');
            lazyloader(jsarr,'js');
        }
        //實現點擊按鈕纔去加載資源的按需加載；
        //例如當點擊按鈕之後需要去實現一部分功能；非核心功能的懶加載；例如，頁面上圖片很多的時候，可以用懶加載進行優化
        document.getElementById('test').onclick = function(){
            lazyloader(imgarr,'img');
            lazyloader(jsarr,'js');
        }
    </script>
</body>
</html>

預加載demo
注意：用chrome瀏覽器打開控制檯；選擇network；將速度改爲Slow 3G；然後再刷新看效果，注意清除瀏覽器緩存後再刷新看效果


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>預加載(smileyqp.com)</title>
<style>
    .cover{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background:pink;
        text-align: center;
    }
    .imgcard{
        width:100px;
        height:100px;
        border:1px solid red;
    }
    .imgcard img{
        width:100px;
        height:100px;
    }
</style>
</head>
<body>
    <div id = 'img'>
        
    </div>
        <h1>一個預加載的demo</h1>
        <p>可以用chrome瀏覽器打開控制檯；選擇network；將速度改爲Slow 3G；然後再刷新看效果，注意清除瀏覽器緩存後再刷新看效果</p>
    <div id = 'cover' class = 'cover'>
        
        0%
    </div>
    <script>
         var imgarr = [
            'http://www.sz.gov.cn/cn/xxgk/zfxxgj/tpxw/201905/W020190508355754728261.jpg',
            'http://www.sz.gov.cn/cn/xxgk/zfxxgj/tpxw/201910/W020191015381074459750.jpg',
            'http://www.sz.gov.cn/cn/xxgk/zfxxgj/tpxw/201910/W020191012421431188792.jpg',
            'http://www.sz.gov.cn/cn/xxgk/zfxxgj/tpxw/201910/W020191014404651968932.jpg'
            ]
        function preload(cover,resource){       //兩個參數；一個是cover的dom節點，另外一個是資源列表
            var length = resource.length;          //記錄資源的長度；
            var nowadd = 0;     //記錄當前加載到哪一個節點
            resource.forEach(function(item,index){
                var img = new Image();
                img.src = item;
                img.onload = function(){        //onload指加載完成
                    nowadd ++;                  //每加載完一個就標註一下；告訴加載到第幾個
                    document.body.append(img);
                    cover.innerHTML = (nowadd/length)*100+'%';
                    if(nowadd == length){
                    cover.style.display = 'none';
                    }
                }
                
            });
        }
        preload(document.getElementById('cover'),imgarr);
    </script>
</body>
</html>

react、vue等的模塊化的工程中怎樣用懶加載以及預加載來實現優化呢？

可以在模塊引入的時候進行優化；即不直接import模塊而是通過方法的方式將其打包時候分成幾個小文件，按需加載

不是異步加載的時候接收到的是一個對象；異步加載的時候接收的是一個函數；下面圖一是非異步加載直接接收的是一個組件對象，直接import的話是打開就引入了；圖二用require和import的異步加載；用異步加載的方式優化了打包；避免直接打包成一個大的文件；異步加載是打包成一個個小文件進行按需加載的，避免了首頁加載時間過於長的問題。（圖二相對於圖一的優化是：用import做了一個異步組件）

例如：在以下代碼中，沒有在頭部使用import導入模塊來寫，而是寫成() => import('./layouts/BasicLayout')

const routerConfig = [{
  path: '/',
  component: () => import('./layouts/BasicLayout'),
  children: [{
    path: 'overview',
    component: () => import('./routes/Overview')
  },{
    path: 'user',
    component: () => import('./routes/User')
  }{
    path: 'task/:AreaName/:CarId/:TaskId',
    component: () => import('./routes/Task/TaskDetails')
  }]
}, {
  path: 'exception',
  component: () => import('./layouts/BlankLayout'),
  children: [{
    path: '403',
    component: () => import('./routes/Exception/403')
  }, {
    path: '404',
    component: () => import('./routes/Exception/404')
  }, {
    path: '500',
    component: () => import('./routes/Exception/500')
  }]
}];

export default routerConfig;