前端性能優化之Lazyload

時間 2019-11-10

原文原文鏈接

目錄javascript

前端性能優化之Lazyload

前端性能優化之Lazyload

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

Lazyload 簡介

前端工做中，界面和效果正在變得愈來愈狂拽炫酷，與此同時性能也是不得不提的問題。有些項目，頁面長，圖片多，內容豐富。像商城頁面。若是同步加載時一次性加載完畢，那確定是要等到花都謝了，loading轉的人都崩潰~。今天分享的是Lazyload技術是一種延遲加載技術。讓頁面加載速度快到飛起、減輕服務器壓力、節約流量、提高用戶體驗。html

1、實現思路

頁面較長，屏幕的可視區域有限。
不設置頁面中img標籤的src屬性值或者將其指向同一個佔位圖。
圖片的實際地址存在img標籤自定義的一個屬性中，如：「data-url」。
監聽scroll，滾動到某個位置時，動態的將url替換成實際的「data-url」。前端

2、上代碼

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>

簡要流程java

st=>start: Start
e=>end
op=>operation: 監聽滾動事件
cond=>condition: 距頂部高度<scrollTop麼？
io=>inputoutput: 將url替換成data-url
st->op->cond
cond(yes)->io->e
cond(no)->op

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" 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','');
    }
  }
};

.
.
.
謝謝觀看，搞定收工0.0~~~這樣草草了事老是很差的瀏覽器

3、再優化

不作任何處理直接監聽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);
    }
    }
}

使用節流函數app

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);

滾動時間least長於600，調用compare，不然延遲350ms執行。
這樣相對於直接onscroll性能獲得更進一步提高，在功能上也沒有什麼問題。
不一樣的業務場景調整一下delay和least就能夠。dom