前端性能優(yōu)化之Lazyload

2018-7-16    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

前端性能優(yōu)化之Lazyload

@(Mob前端-冬晨)[JavaScript|技術(shù)分享|懶加載]

Lazyload 簡(jiǎn)介

前端工作中，界面和效果正在變得越來(lái)越狂拽炫酷，與此同時(shí)性能也是不得不提的問(wèn)題。有些項(xiàng)目，頁(yè)面長(zhǎng)，圖片多，內(nèi)容豐富。像商城頁(yè)面。如果同步加載時(shí)一次性加載完畢，那肯定是要等到花都謝了，loading轉(zhuǎn)的人都崩潰~。今天分享的是Lazyload技術(shù) 是一種延遲加載技術(shù)。讓頁(yè)面加載速度快到飛起、減輕服務(wù)器壓力、節(jié)約流量、提升用戶(hù)體驗(yàn)。

一、實(shí)現(xiàn)思路

頁(yè)面較長(zhǎng)，屏幕的可視區(qū)域有限。 
不設(shè)置頁(yè)面中img標(biāo)簽的src屬性值或者將其指向同一個(gè)占位圖。 
圖片的實(shí)際地址存在img標(biāo)簽自定義的一個(gè)屬性中，如：“data-url”。 
監(jiān)聽(tīng)scroll，滾動(dòng)到某個(gè)位置時(shí)，動(dòng)態(tài)的將url替換成實(shí)際的“data-url”。

二、上代碼

  • html部分(簡(jiǎn)單示意下結(jié)構(gòu)) 
<!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輕松實(shí)現(xiàn)社會(huì)化功能</p> </li> <li"> <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/sms-logo.jpg"><p>短信驗(yàn)證碼SDK</p> </li> <li"> <img class="tamp-img" alt="loading" data-src="http://mob.com/public/images/index/rec-logo.jpg"><p>MobLink實(shí)現(xiàn)Web與App的無(wú)縫鏈接</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
        
    •

簡(jiǎn)要流程

Start監(jiān)聽(tīng)滾動(dòng)事件距頂部高度<scrollTop么？將url替換成data-urlEndyesno
  • js部分 
var aImg = [
  {"src":"http://mob.com/public/images/index/sharesdk-logo.jpg","txt":"ShareSDK輕松實(shí)現(xiàn)社會(huì)化功能"},
  {"src":"http://mob.com/public/images/index/sms-logo.jpg","txt":"短信驗(yàn)證碼SDK"},
  {"src":"http://mob.com/public/images/index/rec-logo.jpg","txt":"MobLink實(shí)現(xiàn)Web與App的無(wú)縫鏈接"}
]; 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滾動(dòng)高度
  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~~~這樣草草了事總是不好的

三、再優(yōu)化

不做任何處理直接監(jiān)聽(tīng)scroll必然導(dǎo)致在滾動(dòng)鼠標(biāo)滾輪的時(shí)候，過(guò)于頻繁的觸發(fā)處理函數(shù)。 
如果剛巧在處理函數(shù)中有大量的操作dom等消耗性能的行為，引發(fā)大量操作，導(dǎo)致頁(yè)面變卡變慢， 
甚至瀏覽器崩潰無(wú)響應(yīng)。 
處理這種問(wèn)題的思路是節(jié)流和防抖。 
節(jié)流函數(shù)的概念有一個(gè)很形象的比喻：在接咖啡的時(shí)候，按了一次按鈕會(huì)出咖啡， 
緊跟著再按幾次按鈕接到的還是那一杯咖啡，相當(dāng)于后面幾次按的沒(méi)有起作用。


常規(guī)的節(jié)流在這里就不多說(shuō)了，下面介紹的是一種每隔least時(shí)間內(nèi)至少執(zhí)行一次的節(jié)流函數(shù)。 

//節(jié)流函數(shù) _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
        
    •

使用節(jié)流函數(shù) 

function compare () { var bodyScrollHeight =  document.documentElement.scrollTop;// body滾動(dòng)高度 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
        
    •

滾動(dòng)時(shí)間least長(zhǎng)于600，調(diào)用compare，否則延遲350ms執(zhí)行。 
這樣相對(duì)于直接onscroll性能得到更進(jìn)一步提升，在功能上也沒(méi)有什么問(wèn)題。 
不同的業(yè)務(wù)場(chǎng)景調(diào)整一下delay和least就可以。


結(jié)語(yǔ)：歷史潮流浩浩蕩蕩，前端技術(shù)的發(fā)展也是日新月異。 
不斷通過(guò)一個(gè)個(gè)小的技術(shù)點(diǎn)深入探究，以加深自己對(duì)js這門(mén)語(yǔ)言的理解。 
溫故知新，回顧舊的內(nèi)容，學(xué)習(xí)新的內(nèi)容和特性，更好的適應(yīng)工作中的需求。

藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



日歷

鏈接

個(gè)人資料

存檔