前端性能優化之Lazyload

huaixiaoz 發布于2019-08-02 10:58 / 1692人閱讀

摘要：前端性能優化之前端冬晨技術分享懶加載簡介前端工作中，界面和效果正在變得越來越狂拽炫酷，與此同時性能也是不得不提的問題。這樣相對于直接性能得到更進一步提升，在功能上也沒有什么問題。結語歷史潮流浩浩蕩蕩，前端技術的發展也是日新月異。

前端性能優化之Lazyload

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

[TOC]

Lazyload 簡介

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

一、實現思路

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

二、上代碼

html部分(簡單示意下結構)



  
    
    Lazyload
    
  
  
    
      
        ShareSDK輕松實現社會化功能
      
      
        短信驗證碼SDK
      
      
        MobLink實現Web與App的無縫鏈接

簡要流程

st=>start: Start
e=>end
op=>operation: 監聽滾動事件
cond=>condition: 距頂部高度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 = `${aImg[i%3].txt}`;
  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~~~這樣草草了事總是不好的

三、再優化

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

使用節流函數

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就可以。

結語：歷史潮流浩浩蕩蕩，前端技術的發展也是日新月異。
 不斷通過一個個小的技術點深入探究，以加深自己對js這門語言的理解。
 溫故知新，回顧舊的內容，學習新的內容和特性，更好的適應工作中的需求。

云服務器 GPU云服務器前端性能優化前端開發性能優化性能優化前端優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52679.html

前端性能優化之Lazyload

摘要：前端性能優化之前端冬晨技術分享懶加載簡介前端工作中，界面和效果正在變得越來越狂拽炫酷，與此同時性能也是不得不提的問題。這樣相對于直接性能得到更進一步提升，在功能上也沒有什么問題。結語歷史潮流浩浩蕩蕩，前端技術的發展也是日新月異。前端性能優化之Lazyload @(Mob前端-冬晨)[JavaScript|技術分享|懶加載] [TOC] Lazyload 簡介前端工作中，界面和效果...

charles_paul 2019-08-29 16:06 評論0 收藏0
前端性能優化--懶加載和預加載

摘要：集合中有等屬性文檔各種高度視口的大小文檔的大小文檔的大小預加載標簽懶加載代碼實現 html Document css .image-item ...

loostudy 2019-08-23 15:27 評論0 收藏0
淺談網站性能之前端性能優化

摘要：淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時，主要是通過進行通信。最近項目慢慢走上正軌，需求趨于平穩，這才想起需要對整站進行性能優化。經過一段時間的學習，結合現在項目的實際性能情況，發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...

Winer 2019-08-20 11:04 評論0 收藏0
淺談網站性能之前端性能優化

摘要：淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時，主要是通過進行通信。最近項目慢慢走上正軌，需求趨于平穩，這才想起需要對整站進行性能優化。經過一段時間的學習，結合現在項目的實際性能情況，發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...

philadelphia 2019-08-01 15:44 評論0 收藏0
web前端性能優化總結

摘要：但是還是會阻塞事件，所以會可能在觸發前或后執行，但是一定會在事件前觸發。當監聽到該圖片元素進入可視窗口時，即將自定義屬性中的地址存儲到屬性中，達到懶加載的效果。當代碼執行，線程被凍結。所以的性能讓變慢。概括涉及到的分類網絡層面構建層面瀏覽器渲染層面服務端層面涉及到的功能點資源的合并與壓縮圖片編解碼原理和類型選擇瀏覽器渲染機制懶加載預加載瀏覽器存儲緩存機制...

evin2016 2019-08-23 15:26 評論0 收藏0