我的前端筆記之懶載入與節流

韓可樂發表於2018-09-15

寫在前

大家好，我又來霍霍大家了，切圖仔報導。記一次面試被問到京東、淘寶是如果做前端效能優化的，在這我也不怕你們鄙視我了，我只是說了一些超低階的就是做雪碧圖啊、壓縮圖片、壓縮js、css ，引用外部檔案。css 放head js 放/body ，減少DOM 操作啊之類的等等。

嗯，沒錯，我只看到了面試官那鄙視的眼神。。。。

廢話不多說了，回來後查了點資料然後有懶載入和預載入，下面簡要介紹一下：

1.what ?

懶載入俗稱延遲載入、是指在一些長頁面中延遲載入圖片，當img出現在使用者可視區域後才載入，是一種良好的頁面效能優化方式，適用於一些大型電商網站比如上面說的那兩個。

2.why ？

減少不必要的載入 第一眼不出現在使用者面前的圖片可以不讓其載入，減少http請求次數
良好的使用者體驗 當你上京東購物，n張圖片都需要載入，網速快的不說啥了，網速慢的等你載入完黃花菜都涼了

3.principle

第一步、先把頁面圖片的src置空，不讓其傳送請求，把真是圖片地址放置在自定義屬性中data-url="xxx.jpg";

第二步、當頁面開始滾動需要監聽scroll事件，在事件回撥函式中，我們判斷一下圖片是否進入了可視區域，如果圖片在可視區域，那麼我們就把自定義的屬性（data-url）賦值給圖片的 src屬性

懶載入的東西說完了，這裡不得不提一嘴節流，因為面試官可能會問你一嘴那懶載入頻繁觸發 scroll 會不會加重瀏覽器的負擔，造成頁面的崩潰啊？

請你用節流堵住他的嘴。

4.throttle

其實節流就是節流嘛！節約流量（開玩笑哈），我只知道是在你定義的時間間隔之外才呼叫函式，這樣就可以大大的限制使用者操作頁面頻繁觸發的scroll 了，大大的提高了瀏覽器的效能，不過你放心，微妙的時間，使用者是不會發覺的。

5.上程式碼了


複製程式碼

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// 先呼叫，保證可視區域的圖片顯示

lazy();

function lazy() {

var imgS = Array.from($('img')); // 獲取頁面 img 元素陣列

// console.log(imgS)

var imgL = $('img').length; // 獲取頁面 img 元素數量

// console.log(imgL)

var seeHeight = $(window).height(); // 獲取頁面可視區域高度

// console.log(seeHeight)

var scrollT = $(document).scrollTop(); // 獲取頁面滾出高度

// console.log(scrollT)

// 開始遍歷這個陣列

for (var i = 0; i < imgL; i++) {

// console.log($(imgS[i]).offset().top + " /")

// console.log(seeHeight + scrollT)

// 如果當前元素出現在可視區域後

if ($(imgS[i]).offset().top < seeHeight + scrollT) {

//如果當前自定義的 url 不為空

if ($(imgS[i]).attr("data-url") !== "undefined") {

// 把自定義屬性地址賦值給 img.src

$(imgS[i]).attr("src", $(imgS[i]).attr("data-url"))

}

// 使用者頻繁操作 scroll 不免造成頁面效能不佳此刻當然需要配合節流使頁面效能更加優化

function throttle(fn, delay) { // 定義的引數函式和延遲時間

var begin = new Date();

return function () {

var curtimer = new Date();

var contxt = this,

args = arguments;

if (curtimer - begin > delay) { // 時間間隔 > 定義時間才執行

fn.apply(contxt, args);

begin = curtimer;

}

$(document).scroll(throttle(lazy, 100)); // 滾動時間在100ms 內只執行一次

</script>

</body>

</html>

接受你們的鄙視。

前端效能優化-圖片懶載入（防抖、節流）
2019-12-31
前端優化
前端優化之圖片懶載入
2018-06-12
前端優化
我的前端筆記之 JavaScript
2018-07-11
前端筆記JavaScript
我的前端筆記之 flex 篇
2018-12-26
前端筆記Flex
我的前端筆記之 bug篇
2018-04-17
前端筆記
我的前端筆記之git篇
2018-04-17
前端筆記Git
我的前端筆記之 meta 篇
2018-04-28
前端筆記
前端效能優化 --- 懶載入&預載入
2018-08-29
前端優化
懶載入之intersection observer
2020-10-13
Server
Hibernate 之懶載入
2018-03-08
javascript圖片懶載入與預載入的分析
2014-01-19
JavaScript
我的前端筆記之移動端適配
2018-04-17
前端筆記
筆記-JavaScript[節流][防抖]
2018-06-06
筆記JavaScript
前端效能優化之節流-throttle
2018-11-19
前端優化
懶載入
2018-08-22
PO，VO 之懶載入疑問
2010-02-01
Vue 的懶載入
2018-03-28
Vue
圖片預載入和懶載入（附上一個小demo瀑布流）
2019-10-08
頁面圖片預載入與懶載入策略
2019-01-14
[譯] React 16.6 懶載入(與預載入)元件
2019-01-06
React元件
圖片懶載入與下拉載入更新資料
2017-11-21
小程式之圖片瀑布流（最全實現方式，額外加送懶載入）
2019-03-04
JavaScript之節流與防抖
2018-07-31
JavaScript
ECMAScript擴充套件 -12 【圖片的預載入與懶載入】
2020-11-20
套件
懶載入和預載入
2018-05-29
iOS: 懶載入
2015-12-25
iOS
前端筆記之JavaScript（十）深入JavaScript節點&DOM&事件
2019-03-27
前端筆記JavaScript事件
【前端優化】js圖片懶載入及優化
2019-07-05
前端優化JS
前端筆記之HTML
2019-03-14
前端筆記HTML
前端筆記之Canvas
2019-04-18
前端筆記Canvas
【譯】懶載入元件
2019-03-18
元件
圖片懶載入
2019-03-04
Vue元件懶載入
2023-09-20
Vue元件
Ribbon - 懶載入
2020-12-24
vue路由懶載入
2018-03-11
Vue路由
Swift中懶載入
2017-09-07
Swift
hibernate懶載入
2015-04-30
spring 懶載入
2010-05-31
Spring

我的前端筆記之 懶載入 與 節流

寫在前