懒加载和预加载
Motivation
今天做拼多多的前端笔试的时候问到了这样一个问题：
图片懒加载和预加载的不同点？他们的应用场景？两种技术对服务器前端的影响。
好像只是听说过，没有具体了解和应用过。所以在这里赶紧总结一下
本文参考了掘金浪里行舟的[懒加载和预加载]https://juejin.im/post/5b0c3b53f265da09253cbed0
懒加载
懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好的优化网页性能的方式。
用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。
在某些情况下，它还可以帮助减少服务器负载。
懒加载通常适用于图片很多，页面很长的电商网站场景中。
懒加载优点有：
- 能提升用户体验。例如在使用B站的时候，如果网页上所有的视频封面都一次性加载，由于图片数目较大，等待时间就会很长，严重影响用户体验。
- 减少无效资源的加载，这样能明显减少服务器的压力和流量，也能够减少浏览器的负担。
- 防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。
懒加载的原理：首先将页面上的src属性设为空字符串，而图片的真实路径则设置在data-original属性中，当页面滚动的时候需要监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域，如果图片在可视区内将图片的src属性设置为data-original值，这样就可以实现延迟加载。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lazyload</title>
<style>
.image-item {
display: block;
margin-bottom: 50px;
height: 200px;//一定记得设置图片高度
}
</style>
</head>
<body>
<img src="" class="image-item" lazyload="true" data-original="images/1.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/2.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/3.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/4.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/5.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/6.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/7.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/8.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/9.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/10.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/11.png"/>
<img src="" class="image-item" lazyload="true" data-original="images/12.png"/>
<script>
var viewHeight =document.documentElement.clientHeight//获取可视区高度
function lazyload(){
var eles=document.querySelectorAll（'img[data-original][lazyload]'）
Array.prototype.forEach.call(eles,function(item,index){
var rect
if(item.dataset.original==="")
return
rect=item.getBoundingClientRect()// 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
if(rect.bottom>=0 && rect.top < viewHeight){
!function(){
var img=new Image()
img.src=item.dataset.original
img.onload=function(){
item.src=img.src
}
item.removeAttribute（"data-original"）//移除属性，下次不再遍历
item.removeAttribute（"lazyload"）
}()
}
})
}
lazyload()//刚开始还没滚动屏幕时，要先触发一次函数，初始化首页的页面图片
document.addEventListener（"scroll"，lazyload)
</script>
</body>
</html>
预加载
资源预加载是另一个性能优化技术，可以用来预先告知浏览器某些资源可能在将来会被使用到。
预加载就是将所有所需的资源提前请求加载到本地，这样后面再需要用到时就直接从缓存中获取资源。
预加载的优点在于：在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。
预加载有几种实现方式：
-
使用HTML标签
<img src="http://pic26.nipic.com/20121213/lkajf.img" style="display:none"> -
使用image对象
<script src="./myPreload.js"></script>
var image = new Image();
image.src = "http://pic26.nipic.com/20121213/lkajf.img";
- 使用XMLHttpRequest对象，虽然存在跨域问题，但会精细控制预加载过程。
var xmlhttprequest = new XMLHttpRequest();
xmlhttprequest.onreadystatechange = callback;
xmlhttprequest.onprogress = progressCallback;
xmlhttprequest.open("GET", "http://image.baidu.com/mouse.jpg", true);
xmlhttprequest.send();
function callback() {
if(xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
var responseText = xmlhttprequest.responseText;
} else {
console.log("Request was unsuccessful: " + xmlhttprequest.status);
}
}
function progressCallback(e) {
e = e || event;
if (e.lengthComputable) {
console.log("Received"+e.loaded+"of"+ e.total + "bytes");
}
}
懒加载和预加载的对比
两者都是提高页面性能有效的办法，两者主要区别是一个提前加载，一个迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用，预加载会增加服务器前端压力。