web前端的无聊小知识--预加载和懒加载

什么是预加载和懒加载

预加载是提前加载图片，当用户需要查看时可直接从本地缓存中渲染（程序比较勤快，还没开始看这个页面的时候就加载这个页面需要的图片视频等等）

常用的是new Image();设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)

懒加载也就是延迟加载，先偷懒不加载（等用户需要看到的时候再加载）

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

预加载和懒加载的区别

• 预加载是指在页面加载完成之前，提前将所需资源下载，之后使用的时候从缓存中调用
  懒加载是延迟加载，按照一定的条件或者需求等到满足条件的时候再加载对应的资源
• 预加载增加了服务器压力，换来的是用户体验的提升，典型例子是在一个图片较多的网页中，如果使用了预加载就可以避免网页加载出来是时，图片的位置一片空白（图片可能还没加载出来），造成不好的用户体验
  懒加载的作用减少不要的请求，缓解了服务器压力
• 懒加载和预加载是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

懒加载的原理

原理：原理很简单，先把img的src指向空或者一个小图片，图片真实的地址存储在img一个自定义的属性里,< img src=”” data-src=”http://real.com/real.jpg” />,等到此图片出现在视野范围内了，获取img元素，把data-src里的值赋给src。这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

优点：页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好

预加载的原理

提前加载图片，当用户需要查看时可直接从本地缓存中渲染

意义：预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。图片预先加载到浏览器中，用户就可顺利地在你的网站上访问。可以保证图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。

预加载的实现方法

• 用CSS和JavaScript实现预加载
• 仅使用JavaScript实现预加载
• 使用Ajax实现预加载

懒加载的实现方法

• 第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟
• 第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载
• 第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片