前端懒加载以及预加载
懒加载（延迟加载）：延迟加载图片或符合某些条件时才加载某些图片。
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
1.懒加载：
懒加载也叫延迟加载，指的是长网页中延迟加载图像，是一种很好优化网页性能的方式。
用户滚动到他们之前，可视区域外的图像不会被加载，在长页面上使用延迟加载使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。
意义：
（1）能提升用户体验，当用户打开长页面时，如果页面上的所有图片都需要加载，由于图片数目较大，等待时间很长，严重影响用户体验。
（2）减少请求次数或延迟请求次数
（3）防止并发加载的资源过多会阻塞JS的加载，影响网站的正常使用。
懒加载的原理：
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟。
2.首先将页面上的图片的src属性设置为空字符串，而图片的真实路径则设置在data-original属性中。判断元素是否在可视区内
当页面滚动的时候去监听scroll事件，在scroll事件的回调中，判断我们懒加载的图片是否进入可视区域，如果图片在可视区域将图片的src属性设置为data-original的值，这样就实现了延迟加载。
<ul>
<li><img src="img/default.png" data="img/1.jpg" alt=""></li>
<li><img src="img/default.png" data="img/2.jpg" alt=""></li>
<li><img src="img/default.png" data="img/3.jpg" alt=""></li>
<li><img src="./imgs/default.png" data="img/3.jpg" alt=""></li>
<li><img src="./imgs/default.png" data="img/1.jpg" alt=""></li>
<li><img src="./imgs/default.png" data="img/2.jpg" alt=""></li>
<li><img src="./imgs/default.png" data="img/3.jpg" alt=""></li>
<li><img src="./imgs/default.png" data="img/1.jpg" alt=""></li>
<li><img src="./imgs/default.png" data="img/2.jpg" alt=""></li>
<li><img src="./imgs/default.png" data="img/3.jpg" alt=""></li>
</ul>
function lazyLoad(){
let imgs=document.querySelectorAll('img');
//获取屏幕可视区高度
let clientHeight=document.body.clientHeight||document.documentElement.clientHeight||window.innerHeight;
//获取滚动条距顶部的位置（即已滚动的高度）
let scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
for(let i=0;i<imgs.length;i++){
let top=clientHeight+scrollTop-imgs[i].offsetTop;
if(top>0|| imgs[i].offsetTop<imgs[i].height){
imgs[i].src=imgs[i].getAttribute('data');
}
}
}
window.onload=lazyLoad;
window.onscroll=lazyLoad;
2.预加载：
资源预加载是另一种性能优化技术，我们可以应用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所需的资源提前请求加载到本地，这样后面需要用到的时候就会直接从缓存中取资源。
为什么要用预加载：
在网页全部加在之前，对一些主要的内容进行加载，以提供给用户更好的体验，减少等待时间。否则对于一个页面内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有的内容加载完毕。
意义： 牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。
实现方式：
（1）可以用CSS(background)、JS(Image)、HTML(<img />)都可以。
（2）使用Image对象。
常用的是new Image();设置其src来实现预载，再使用onload方法回调预载完成事件。
只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。
当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。
var image= new Image()； image.src="http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg"
