1.合适加载策略

一、对于资源我们可以做如下的事

1.渲染相关资源放在head里

2.依赖关系必须有先后顺序

3.大的执行长的js程序，最好挂载为异步

二、页面资源如何加载

1.资源的加载根据浏览器不同有细微差距，大多数是大同小异，唯独ie6,是阻塞的

2.一般来说script和js资源是优先于图片资源

3.一般来说script执行时会阻塞后面的资源加载和渲染

4.请求时并发的，但是有最大并发限制

三、懒加载

1.即按非必要资源延后加载

2.原理就是只等到需要的时候去利用js加载内容

3.懒加载运用时（首屏内容过大，一次加载完太耗时，想让用户尽快的看到页面；用户后续使用的某个功能需要用到大量的资源【比如地图，聊天】）

四、预加载

1.即把所有资源加载完毕再让用户看到页面

2.远离是先利用遮罩遮住页面，js加载资源，判断加载完成去掉遮罩

// 场景 需要流畅体验的应用
// pre.html
<script>
    var imgarr = ['http://pc.baidu.com/pic1.png', 'http://taobao.com/pic2aafa.png'];
    var jsarr = ['https://comon.enoder.js', 'http://cdn.jquery.js'];
    
    function lazyLoader(url, type, target) {
        if (!url) throw new Error('url is necessary!');
        if(!type) throw new Error('type is not empty');
        var target = target || document.body;
        var catergory = {
            img: function() {
                var img = new Image();
                return img;
            },
            js: function() {
                var script = document.createElement('script');
                return script;
            }
        }
        if (typeof url === 'string') {
            var dom = catergory[type]();
            dom.src = url;
            target.appendChild(dom);
        } else {
            url.forEach(function(item, index) {
                var dom = catergory[type]();
                dom.src = item;
                target.appendChild(dom);
            })
        }
    }
    window.onload = function() {
        lazyLoader(imgarr, 'img');
        lazyLoader(jsarr, 'js')
    }
</script>

五、webpack懒加载[如何进行模块懒加载]

1.ES6的方式

2.Require的方式

// router.js

{
   path: '/about',
   name: 'AboutMe'
   component: () => import(/*webpackChunkName: "about"*/'@/components/about')
}