web优化之懒加载和预加载

懒加载和预加载是常用的web优化的手段。所以我们首先应该明白什么是懒加载和预加载。
懒加载：懒加载也加延迟加载，延迟加载网络资源或符合某些条件时才加载资源。常见的就是图片延时加载。
懒加载的意义：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
懒惰实现方式：
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
说了这么多，上代码：

//javascript
<script type="text/javascript">
window.onload = function(){
    var imgs = Array.from(document.querySelectorAll('img'));
    delay();
    window.addEventListener('scroll', exec(delay, 4000));

    function exec(fun, delaytime){
         var timeout,startTime = new Date();
        return function(){
            clearTimeout(timeout);
            tiemout = setTimeout(fun, delaytime);
        }
    }

    function delay(){
        var scrollTop = window.scrollY;
        var clientHeight = document.documentElement.clientHeight;
        //console.log(clientHeight);
        imgs.forEach((item, index)=>{
            if(scrollTop==0 && item.offsetTop<=clientHeight+scrollTop){
                //console.log(item.getAttribute('data_img'));
                item.setAttribute('src',item.getAttribute('data_img'));
            }else if(item.offsetTop<=clientHeight+scrollTop && item.offsetTop > scrollTop){
                item.setAttribute('src',item.getAttribute('data_img'));
            }
        });
    }
}
</script>

从demo的js里面我们可以看出，我们在页面滚动上添加了事件。页面初次加载显示时只会显示页面可视区域的图片，当页面滚动到可视区域后才会加载图片显示图片，如图所示：

两张图可以看出首页加载只显示了两张图片，当向下滚动时继续加载了后边的图片。

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。预加载应用如广告弹窗等。

//
var target = document.getElementById('test');
addImg('./2.jpg');
function addImg(url){
    var img = document.createElement('img');
    var image = new Image();
    image.src=url;
    image.onload = function(){
        img.src = this.src;
                img.height = 50;
                img.width = 50;
    }
    target.appendChild(img);
}
//html
<div id="test"></div>

仅以以上两个小列子学习预加载和懒加载。