摘要:前端性能優(yōu)化之前端冬晨技術(shù)分享懶加載簡(jiǎn)介前端工作中,界面和效果正在變得越來越狂拽炫酷,與此同時(shí)性能也是不得不提的問題。這樣相對(duì)于直接性能得到更進(jìn)一步提升,在功能上也沒有什么問題。結(jié)語歷史潮流浩浩蕩蕩,前端技術(shù)的發(fā)展也是日新月異。
前端性能優(yōu)化之Lazyload
@(Mob前端-冬晨)[JavaScript|技術(shù)分享|懶加載]
[TOC]
Lazyload 簡(jiǎn)介前端工作中,界面和效果正在變得越來越狂拽炫酷,與此同時(shí)性能也是不得不提的問題。有些項(xiàng)目,頁面長(zhǎng),圖片多,內(nèi)容豐富。像商城頁面。如果同步加載時(shí)一次性加載完畢,那肯定是要等到花都謝了,loading轉(zhuǎn)的人都崩潰~。今天分享的是Lazyload技術(shù) 是一種延遲加載技術(shù)。讓頁面加載速度快到飛起、減輕服務(wù)器壓力、節(jié)約流量、提升用戶體驗(yàn)。一、實(shí)現(xiàn)思路
頁面較長(zhǎng),屏幕的可視區(qū)域有限。
不設(shè)置頁面中img標(biāo)簽的src屬性值或者將其指向同一個(gè)占位圖。
圖片的實(shí)際地址存在img標(biāo)簽自定義的一個(gè)屬性中,如:“data-url”。
監(jiān)聽scroll,滾動(dòng)到某個(gè)位置時(shí),動(dòng)態(tài)的將url替換成實(shí)際的“data-url”。
html部分(簡(jiǎn)單示意下結(jié)構(gòu))
Lazyload
ShareSDK輕松實(shí)現(xiàn)社會(huì)化功能
短信驗(yàn)證碼SDK
MobLink實(shí)現(xiàn)Web與App的無縫鏈接
簡(jiǎn)要流程
st=>start: Start e=>end op=>operation: 監(jiān)聽滾動(dòng)事件 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輕松實(shí)現(xiàn)社會(huì)化功能"}, {"src":"http://mob.com/public/images/index/sms-logo.jpg","txt":"短信驗(yàn)證碼SDK"}, {"src":"http://mob.com/public/images/index/rec-logo.jpg","txt":"MobLink實(shí)現(xiàn)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滾動(dòng)高度 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~~~這樣草草了事總是不好的
不做任何處理直接監(jiān)聽scroll必然導(dǎo)致在滾動(dòng)鼠標(biāo)滾輪的時(shí)候,過于頻繁的觸發(fā)處理函數(shù)。
如果剛巧在處理函數(shù)中有大量的操作dom等消耗性能的行為,引發(fā)大量操作,導(dǎo)致頁面變卡變慢,
甚至瀏覽器崩潰無響應(yīng)。
處理這種問題的思路是節(jié)流和防抖。
節(jié)流函數(shù)的概念有一個(gè)很形象的比喻:在接咖啡的時(shí)候,按了一次按鈕會(huì)出咖啡,
緊跟著再按幾次按鈕接到的還是那一杯咖啡,相當(dāng)于后面幾次按的沒有起作用。
常規(guī)的節(jié)流在這里就不多說了,下面介紹的是一種每隔least時(shí)間內(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ù)
function compare () { var bodyScrollHeight = document.documentElement.scrollTop;// body滾動(dòng)高度 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);
滾動(dòng)時(shí)間least長(zhǎng)于600,調(diào)用compare,否則延遲350ms執(zhí)行。
這樣相對(duì)于直接onscroll性能得到更進(jìn)一步提升,在功能上也沒有什么問題。
不同的業(yè)務(wù)場(chǎng)景調(diào)整一下delay和least就可以。
結(jié)語:歷史潮流浩浩蕩蕩,前端技術(shù)的發(fā)展也是日新月異。
不斷通過一個(gè)個(gè)小的技術(shù)點(diǎn)深入探究,以加深自己對(duì)js這門語言的理解。
溫故知新,回顧舊的內(nèi)容,學(xué)習(xí)新的內(nèi)容和特性,更好的適應(yīng)工作中的需求。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/113520.html
摘要:前端性能優(yōu)化之前端冬晨技術(shù)分享懶加載簡(jiǎn)介前端工作中,界面和效果正在變得越來越狂拽炫酷,與此同時(shí)性能也是不得不提的問題。這樣相對(duì)于直接性能得到更進(jìn)一步提升,在功能上也沒有什么問題。結(jié)語歷史潮流浩浩蕩蕩,前端技術(shù)的發(fā)展也是日新月異。 前端性能優(yōu)化之Lazyload @(Mob前端-冬晨)[JavaScript|技術(shù)分享|懶加載] [TOC] Lazyload 簡(jiǎn)介 前端工作中,界面和效果...
摘要:集合中有等屬性文檔各種高度視口的大小文檔的大小文檔的大小預(yù)加載標(biāo)簽 懶加載 代碼實(shí)現(xiàn) html Document css .image-item ...
摘要:淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無非是減少用戶流量消耗,提升用戶首屏體驗(yàn),提升用戶訪問速度,讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請(qǐng)求數(shù)量基本原理在瀏覽器與服務(wù)器進(jìn)行通信時(shí),主要是通過進(jìn)行通信。 最近項(xiàng)目慢慢走上正軌,需求趨于平穩(wěn),這才想起需要對(duì)整站進(jìn)行性能優(yōu)化。經(jīng)過一段時(shí)間的學(xué)習(xí),結(jié)合現(xiàn)在項(xiàng)目的實(shí)際性能情況,發(fā)現(xiàn)確實(shí)有許多地方可以進(jìn)行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...
摘要:淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無非是減少用戶流量消耗,提升用戶首屏體驗(yàn),提升用戶訪問速度,讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請(qǐng)求數(shù)量基本原理在瀏覽器與服務(wù)器進(jìn)行通信時(shí),主要是通過進(jìn)行通信。 最近項(xiàng)目慢慢走上正軌,需求趨于平穩(wěn),這才想起需要對(duì)整站進(jìn)行性能優(yōu)化。經(jīng)過一段時(shí)間的學(xué)習(xí),結(jié)合現(xiàn)在項(xiàng)目的實(shí)際性能情況,發(fā)現(xiàn)確實(shí)有許多地方可以進(jìn)行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...
摘要:但是還是會(huì)阻塞事件,所以會(huì)可能在觸發(fā)前或后執(zhí)行,但是一定會(huì)在事件前觸發(fā)。當(dāng)監(jiān)聽到該圖片元素進(jìn)入可視窗口時(shí),即將自定義屬性中的地址存儲(chǔ)到屬性中,達(dá)到懶加載的效果。當(dāng)代碼執(zhí)行,線程被凍結(jié)。所以的性能讓變慢。 概括 涉及到的分類 網(wǎng)絡(luò)層面 構(gòu)建層面 瀏覽器渲染層面 服務(wù)端層面 涉及到的功能點(diǎn) 資源的合并與壓縮 圖片編解碼原理和類型選擇 瀏覽器渲染機(jī)制 懶加載預(yù)加載 瀏覽器存儲(chǔ) 緩存機(jī)制...
閱讀 2686·2021-09-22 15:58
閱讀 2230·2019-08-29 16:06
閱讀 896·2019-08-29 14:14
閱讀 2810·2019-08-29 13:48
閱讀 2451·2019-08-28 18:01
閱讀 1495·2019-08-28 17:52
閱讀 3317·2019-08-26 14:05
閱讀 1610·2019-08-26 13:50