由懶加載和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也有加載消耗和內存佔用，這一點我也是有點模棱兩可，後續有眉頭會持續跟進並更新一下，歡迎大家的指教。