预加载是指在页面加载完成之前,提前将所需资源下载,之后使用的时候从缓存中调用;懒加载是延迟加载,按照一定的条件或者需求等到满足条件的时候再加载对应的资源
预加载增加了服务器压力,换来的是用户体验的提升,典型例子是在一个图片较多的网页中,如果使用了预加载就可以避免网页加载出来是时,图片的位置一片空白(图片可能还没加载出来),造成不好的用户体验;懒加载的作用减少不要的请求,缓解了服务器压力
懒加载的原理
原理:原理很简单,先把img的src指向空或者一个小图片,图片真实的地址存储在img一个自定义的属性里,< img src=”” data-src=”http://real.com/real.jpg” />,等到此图片出现在视野范围内了,获取img元素,把data-src里的值赋给src。这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。
优点:页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好
预加载的原理
提前加载图片,当用户需要查看时可直接从本地缓存中渲染
意义:预加载可以说是牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。