當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端性能优化之Lazyload

發(fā)布時間：2023/12/19 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了前端性能优化之Lazyload 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

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

[TOC]

Lazyload 簡介

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

一、實現(xiàn)思路

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

二、上代碼

html部分(簡單示意下結(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輕松實現(xiàn)社會化功能</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實現(xiàn)Web與App的無縫鏈接</p></li></ul></body> </html>

簡要流程

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

js部分

.
.
.
謝謝觀看，搞定收工0.0~~~這樣草草了事總是不好的

三、再優(yōu)化

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

常規(guī)的節(jié)流在這里就不多說了，下面介紹的是一種每隔least時間內(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);}} }

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

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

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

總結(jié)

以上是生活随笔為你收集整理的前端性能优化之Lazyload的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： oracle别名用双引号,Oracle别
下一篇：让你页面速度飞起来 Web前端性能优化