由懒加载和css sprites想到的页面优化

1.懒加载

　　（1）多图片加载时为了减少请求量对页面进行快速渲染而使用一个简单的图片作为替代位置，根据页面位置对相应图片（img）的src路径进行二次赋值，以此实现前端优化的方法。

　　（2）步骤：

　　　　a.加载备用的图片。

　　　　b.根据屏幕滚动位置判断图片加载时机。

　　　　c.隐形加载要替换图片。

　　　　d.替换图片.

　　（3）常见的获取页面宽高的API函数

　　　　页可见区域宽： document.body.clientWidth;

　　　　网页可见区域高： document.body.clientHeight;

　　　　网页可见区域宽： document.body.offsetWidth (包括边线的宽);

　　　　网页可见区域高： document.body.offsetHeight (包括边线的宽);

　　　　网页正文全文宽： document.body.scrollWidth;

　　　　网页正文全文高： document.body.scrollHeight;

　　　　网页被卷去的高： document.body.scrollTop;

　　　　网页被卷去的左： document.body.scrollLeft;

　　　　网页正文部分上： window.screenTop;

　　　　网页正文部分左： window.screenLeft;

　　　　屏幕分辨率的高： window.screen.height;

　　　　屏幕分辨率的宽： window.screen.width;

　　　　屏幕可用工作区高度： window.screen.availHeight;

　　（4）实现代码

　　

// onload是等所有的资源文件加载完毕以后再绑定事件
window.onload = function(){
	// 获取图片列表，即img标签列表
	var imgs = document.querySelectorAll('img');

	// 获取到浏览器顶部的距离
	function getTop(e){
		return e.offsetTop;
	}

	// 懒加载实现
	function lazyload(imgs){
		// 可视区域高度
		var h = window.innerHeight;
		//滚动区域高度
		var s = document.documentElement.scrollTop || document.body.scrollTop;
		for(var i=0;i<imgs.length;i++){
			//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
			if ((h+s)>getTop(imgs[i])) {
				// 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s
				(function(i){
					setTimeout(function(){
						// 不加立即执行函数i会等于9
						// 隐形加载图片或其他资源，
						//创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
						var temp = new Image();
						temp.src = imgs[i].getAttribute('data-src');//只会请求一次
						// onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
						temp.onload = function(){
							// 获取自定义属性data-src，用真图片替换假图片
							imgs[i].src = imgs[i].getAttribute('data-src')
						}
					},2000)
				})(i)
			}
		}
	}
	lazyload(imgs);

	// 滚屏函数
	window.onscroll =function(){
		lazyload(imgs);
	}
}

2.css sprites精灵图

　　（1）CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

　　（2）优缺点：

　　　　优：减少页面请求；在内存上相比于之前分散状态会明显小很多；

　　　　缺：制作麻烦，需要留好间隙；如果要换其中的一张图片，几乎要调整整个图片或调整CSS位置；

 

3.由此想到的页面优化

　　无论是懒加载还是css sprites都是从减少页面请求次数和图片体积上进行的优化方式，本身都是十分亮眼的，但总是会产生渲染消耗问题，在之前我提到过新的图片加载方式lottie,通过把图片进行JSON格式化（又与base64格式不同），这样会不会更好一点呢，当然lottie针对的是动画，且lottie也有加载消耗和内存占用，这一点我也是有点模棱两可，后续有眉头会持续跟进并更新一下，欢迎大家的指教。