一、Lazyload的了解分析
- Lazyload技術是一種延遲加載技術，讓頁面加載速度快到飛起、減輕伺服器壓力、節約流量、提升使用者體驗
-
實作思路
1）頁面較長，螢幕的可視區域有限
2）不設定頁面中img标簽的src屬性值或者将其指向同一個占位圖
3）圖檔的實際位址存在img标簽自定義的一個屬性中，如：“data-url”
4）監聽scroll，滾動到某個位置時，動态的将url替換成實際的“data-url”
- 流程圖分析:
前端性能優化之Lazyload -
代碼實作
html部分：
<!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>
js部分：
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" 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','');
}
}
};
二、Lazyload的再優化
- 不做任何處理直接監聽scroll必然導緻在滾動滑鼠滾輪的時候，過于頻繁的觸發處理函數。如果剛巧在處理函數中有大量的操作dom等消耗性能的行為，引發大量操作，導緻頁面變卡變慢，甚至浏覽器崩潰無響應，處理這種問題的思路是節流和防抖
- 節流函數的形象比喻，比如在接咖啡的時候，按了一次按鈕會出咖啡，緊跟着再按幾次按鈕接到的還是那一杯咖啡，相當于後面幾次按的沒有起作用
-
每隔least時間内至少執行一次的節流函數
1）代碼如下：
//節流函數
_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);
}
}
}
2）使用節流函數：
代碼如下：
function compare () {
var bodyScrollHeight = document.documentElement.scrollTop;// body滾動高度
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);
3）說明：滾動時間least長于600，調用compare，否則延遲350ms執行。這樣相對于直接onscroll性能得到更進一步提升，在功能上也沒有什麼問題，不同的業務場景調整一下delay和least就可以
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)