懒加载和预加载
2020-02-02 本文已影响0人
agamgn
一、懒加载
1.1、什么是懒加载
懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。
1.2、为什么要使用懒加载
- 提升用户的体验，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，用户难免会心生抱怨，这就严重影响用户体验。
- 减少无效资源的加载，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。
- 防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。
1.3、实现原理
页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，的请求。懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行，是HTML5的新属性）属性里，要用的时候在通过监听页面的滚动事件(这里最好做一下节流), 滚动时遍历未加载的图片, 获取图片距离可视区顶部的高度, 假如小于页面高度, 就将 src 替换真实的 url。
1.4、实现代码
//按照需求加载
var fn = function(){
$("#imagesBoxId .image_div_css").each(function(){ //遍历所有图片
var othis = $(this),//当前图片对象
var top = othis.offset().top - $(window).scrollTop();
//计算图片top-滚动条top
if (top > $(window).height()) { //如果两者之差小于屏幕高度
return; //不管
} else {
othis.css('background-image', othis.attr('data-image'));
//可见的时候把占位值替换 并删除占位属性
};
});
};
fn();
$(window).scroll(fn).resize(fn); //绑定事件
具体代码请参考下面的地址
二、预加载
2.1、什么是预加载
预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。
2.2、为什么要使用预加载
在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。假如不预先加载好, 那就会造成动画不流畅产生闪动白屏。
2.3、实现方式
2.3.1、使用HTML标签
在 link 标签上设置 rel="prefetch" 可以实现预加载, 该方法兼容性还不太好。
2.3.2、CSS 实现图片预加载
将图片放在 CSS 中加载, 但不显示
#preload { background: url(xxx.png) no-repeat -9999px -9999px; }
或者
<img src="xxx.png" style="display:none"/>
2.3.3、JS 实现预加载
<script src="./myPreload.js"></script>
var image= new Image()
image.src="xxx.png"
2.3.4、Ajax 实现预加载
Ajax 实现预加载比较好的一个点是, 不需要创建标签影响到页面, 但是可能会有跨域问题
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://xxxx.js');
xhr.send('');
三、懒加载和预加载的对比
两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。关于页面性能优化请参考页面性能优化[在写]
