懒加载，预加载

---

一.懒加载

1.what:

延迟加载，一种很好的优化网页性能方式。可视区域外的东西不会加载，减少服务器的负载。适用图片很多，页面很长的电商网站。

2.why:

1.提升用户体验：因为一些图片较多的网站，如果一次性加载，用户看着白页面，等待时间一久，用户体验极差。
2.减少无效资源的加载：有时候用户只需浏览到一部分，这样的话减少服务器的压力和流量，减少浏览器的负担。
3. 防止并发加载的资源过多会阻塞js的加载。

原理：将页面上的图片src属性设置为空字符串，真实的图片路径存储在data-original属性中，当页面滚动的时候去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域，如果图片在可视区内将图片的src属性设置为data-original的值，这样就可以实现延迟加载。

3.How:

1.拿到所有的图片dom
2.遍历每个图片判断当前图片是否到了可视区范围内
3.如果到了就设置图片的src属性
4.绑定window的scroll事件，对其进行事件监听。

代码：懒加载实现

function getTop(el) {
    
    let top=el.offsetTop;
    let parent=el.offsetParent;
    while (parent!==null) {
        top+=parent.offsetTop+parent.clientTop;
        parent=parent.offsetParent;
    }
    return top;
}
function inSight(el) {
    
    const clientHeight=document.documentElement.clientHeight;
    const scrollHeight=document.documentElement.scrollTop+clientHeight;
    return getTop(el,0)<scrollHeight;
}
function loadImg(el) {
    
    if(!el.src){
        el.src=el.dataset.src;
    }
}
function checkImgs() {
    
      const imgs=document.getElementsByTagName('img');
      Array.from(imgs).forEach(el=>{
          if(inSight(el)){
              loadImg(el);
          }
      })
}
window.addEventListener('scroll',checkImgs,false);
window.onload=checkImgs;

因为scroll这样的事件浏览器在很短的时间内会触发很多次，为了提升页面性能，我们需要一个节流函数来控制函数的多次触发，一段时间内只执行一次回调。

function throttle(fun,delay,time) {
     
        let timeout,startTime=new Date();
        return function(){
    
            let context=this,args=arguments,curTime=new Date();
            clearTimeout(timeout);
            //如果达到了设定的触发事件间隔，触发handler
            if (curTime-startTime>=time) {
                fun();
                startTime=curTime;
            }else{
                timeout=setTimeout(fun, delay);
            }
        }
     }
     window.addEventListener('scroll',throttle(checkImgs,200,1000),false)

二.预加载

1.what：

在使用图片之前就已经加载好，当需要查看时，直接从本地缓存中渲染。也就是提前加载

2.why:

图片预先加载到浏览器中，对要加载很多图片的网站来说，可以保证图片快速的渲染，提升用户体验。但是加重了浏览器的压力。

3.how:

1.使用css进行图片的预加载。
原理：我们将之后要用的图片预先加载到不可见区域。在使用的时候，在设置它到可视区域就ok.
2.使用Image对象
3.使用XMLHttpReauest对象可以更加精细的控制预加载过程。

代码：

//1.使用css预加载：也可以直接设置display：none;
  body::after{
            content: "";
            display:block;
            position: absolute;
            background: url('./img1.jpg') no-repeat -10000px -1000px,
                        url('./img2.jpg') no-repeat -10000px -1000px,
                        url('./img3.jpg') no-repeat -10000px -1000px;
            width:0;
            height:0;
        }
 //2.使用img对象
     <script src="./imgs.js"></script>
     //imgs.js文件
     let image=new Image();
     image.src="wanmei.imgs.com"