前端性能優化之Lazyload
@(Mob前端-冬晨)[JavaScript|技術分享|懶加載]
Lazyload 簡介
前端工作中，界面和效果正在變得越來越狂拽炫酷，與此同時性能也是不得不提的問題。有些項目，頁面長，圖片多，內容豐富。像商城頁面。如果同步加載時一次性加載完畢，那肯定是要等到花都謝了，loading轉的人都崩潰~。今天分享的是Lazyload技術 是一種延遲加載技術。讓頁面加載速度快到飛起、減輕服務器壓力、節約流量、提升用戶體驗。
一、實現思路
頁面較長，屏幕的可視區域有限。
不設置頁面中img標簽的src屬性值或者將其指向同一個占位圖。
圖片的實際地址存在img標簽自定義的一個屬性中，如：“data-url”。
監聽scroll，滾動到某個位置時，動態的將url替換成實際的“data-url”。
二、上代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lazyload</title> <style type="text/css"> .mob-wrap li{list-style: none;width: 100%;height: 345px;} </style> </head> <body> <ul class="mob-wrap"> <li"> <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sharesdk-logo.jpg"><p>ShareSDK輕松實現社會化功能</p> </li> <li"> <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sms-logo.jpg"><p>短信驗證碼SDK</p> </li> <li"> <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/rec-logo.jpg"><p>MobLink實現Web與App的無縫鏈接</p> </li> </ul> </body> </html>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
簡要流程
var aImg = [
{"src":"http://mob.com/public/images/index/sharesdk-logo.jpg","txt":"ShareSDK輕松實現社會化功能"},
{"src":"http://mob.com/public/images/index/sms-logo.jpg","txt":"短信驗證碼SDK"},
{"src":"http://mob.com/public/images/index/rec-logo.jpg","txt":"MobLink實現Web與App的無縫鏈接"}
]; var sLi = '';
document.getElementsByClassName("mob-wrap")[0].innerHTML=""; for(let i = 0;i<10;i++){
sLi = document.createElement("li");
sLi.innerHTML = `<img class="tamp-img" alt="loading" src="./zwt.gif" data-src="${aImg[i%3].src}"><p>${aImg[i%3].txt}</p>`;
document.getElementsByClassName("mob-wrap")[0].appendChild(sLi);
};
window.onscroll = function () {
var bodyScrollHeight = document.documentElement.scrollTop;// body滾動高度
var windowHeight = window.innerHeight;// 視窗高度
var imgs = document.getElementsByClassName('tamp-img');
for (var i =0; i < imgs.length; i++) { var imgHeight = imgs[i].offsetTop;// 圖片距離頂部高度 if (imgHeight < windowHeight + bodyScrollHeight - 340) { imgs[i].src = imgs[i].getAttribute('data-src'); imgs[i].className = imgs[i].className.replace('tamp-img','');
}
}
};
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
.
.
.
謝謝觀看，搞定收工0.0~~~這樣草草了事總是不好的
三、再優化
不做任何處理直接監聽scroll必然導致在滾動鼠標滾輪的時候，過于頻繁的觸發處理函數。
如果剛巧在處理函數中有大量的操作dom等消耗性能的行為，引發大量操作，導致頁面變卡變慢，
甚至瀏覽器崩潰無響應。
處理這種問題的思路是節流和防抖。
節流函數的概念有一個很形象的比喻：在接咖啡的時候，按了一次按鈕會出咖啡，
緊跟著再按幾次按鈕接到的還是那一杯咖啡，相當于后面幾次按的沒有起作用。
常規的節流在這里就不多說了，下面介紹的是一種每隔least時間內至少執行一次的節流函數。
_throttle = (fn, delay, least) => { var timeout = null,
startTime = new Date();
fn(); return function() { var curTime = new Date();
clearTimeout(timeout); if(curTime - startTime >= least) {
fn();
startTime = curTime;
}else {
timeout = setTimeout(fn, delay);
}
}
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
使用節流函數
function compare () { var bodyScrollHeight = document.documentElement.scrollTop; console.log(bodyScrollHeight+"替換src方法") var windowHeight = window.innerHeight; var imgs = document.getElementsByClassName('tamp-img'); for (var i =0; i < imgs.length; i++) { var imgHeight = imgs[i].offsetTop; if (imgHeight < windowHeight + bodyScrollHeight - 340) {
imgs[i].src = imgs[i].getAttribute('data-src');
imgs[i].className = imgs[i].className.replace('tamp-img','');
}
}
}
window.onscroll = _throttle(compare, 350,600);
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
滾動時間least長于600，調用compare，否則延遲350ms執行。
這樣相對于直接onscroll性能得到更進一步提升，在功能上也沒有什么問題。
不同的業務場景調整一下delay和least就可以。
結語：歷史潮流浩浩蕩蕩，前端技術的發展也是日新月異。
不斷通過一個個小的技術點深入探究，以加深自己對js這門語言的理解。
溫故知新，回顧舊的內容，學習新的內容和特性，更好的適應工作中的需求。
藍藍設計( www.lapeinture.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
