（二十七）懒加载和预加载最简单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{
        100px;
        height:100px;
        border:1px solid red;
    }
    .imgcard img{
        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;