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

HTML

前端性能优化之Lazyload

發布時間：2023/12/29 HTML 33 豆豆

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

一、Lazyload的理解分析

Lazyload技術是一種延遲加載技術，讓頁面加載速度快到飛起、減輕服務器壓力、節約流量、提升用戶體驗

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

流程圖分析:

代碼實現
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>

js部分：

二、Lazyload的再優化

不做任何處理直接監聽scroll必然導致在滾動鼠標滾輪的時候，過于頻繁的觸發處理函數。如果剛巧在處理函數中有大量的操作dom等消耗性能的行為，引發大量操作，導致頁面變卡變慢，甚至瀏覽器崩潰無響應，處理這種問題的思路是節流和防抖

節流函數的形象比喻，比如在接咖啡的時候，按了一次按鈕會出咖啡，緊跟著再按幾次按鈕接到的還是那一杯咖啡，相當于后面幾次按的沒有起作用

每隔least時間內至少執行一次的節流函數
1）代碼如下：

//節流函數 _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);}} }

2）使用節流函數：
代碼如下：

3）說明：滾動時間least長于600，調用compare，否則延遲350ms執行。這樣相對于直接onscroll性能得到更進一步提升，在功能上也沒有什么問題，不同的業務場景調整一下delay和least就可以

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：简单几步自己动手用智能手机展示全息立体影
下一篇：非常好用的浏览器下载插件