摘要:采用不可見元素減少變更產(chǎn)生的運(yùn)算臨時(shí)說法的原因是當(dāng)數(shù)量再次增加,達(dá)到又一新高度后,閃爍問題再現(xiàn)。至此,全面解決動(dòng)態(tài)添加樣式導(dǎo)致的元素閃爍。原生進(jìn)一步加快速度避免閃爍是個(gè)好東西。
元素閃爍很丑,難解決。
修改 Class 而不是 Style我在不久前做過一個(gè)導(dǎo)航欄,要求其滾動(dòng)到屏幕頂端后固定。很常見。開始的時(shí)候沒問題,很快就可以搞定。
</>復(fù)制代碼
nav {
position: absolute;
top: 60px;
}
</>復(fù)制代碼
var scroll=0;
var nav=$("nav");
var navST=60; //該元素距離網(wǎng)頁頂端60px
$(window).scroll(function(){
if($(document).scrollTop()>navST && scroll==0){
nav.css({position: "fixed",top: "0"});
scroll=1;
}
else if($(document).scrollTop()<=navST && scroll==1){
nav.removeAttr("style");
scroll=0;
}
});
運(yùn)行很流暢。
做好,我自然就忙著網(wǎng)頁內(nèi)容去了。沒曾想,隨著頁面 JS 的不斷增加,導(dǎo)航欄在固定時(shí)出現(xiàn)了可怕的閃動(dòng)。
</>復(fù)制代碼
唔,就是 一下看得見 一下看不見 的東西!
應(yīng)該有不少人和我一樣。百度,無果。谷歌,看不懂,翻譯也不行。
不知道真相的我,眼淚 流下來。
哦!一道莫名的亮光從我的眼前閃過!這道亮光里,有希望,,有興奮,,組成了四個(gè)大字:
</>復(fù)制代碼
元素重繪
就在這千萬分之一秒,億萬分之一秒 里,我理解了:
</>復(fù)制代碼
nav.css({position: "fixed",top: "0"});
這一句 JS 產(chǎn)生了兩次 DOM 寫入,影響瀏覽器渲染頁面兩次。
使用 $.addClass 語句可以解決。
</>復(fù)制代碼
nav {
position: absolute;
top: 60px;
}
.fixed {
position: fixed;
top: 0;
}
</>復(fù)制代碼
var scroll=0;
var nav=$("nav");
var navST=60; //該元素距離網(wǎng)頁頂端60px
$(window).scroll(function(){
if($(document).scrollTop()>navST && scroll==0){
nav.addClass("fixed");
scroll=1;
}
else if($(document).scrollTop()<=navST && scroll==1){
nav.removeClass("fixed");
scroll=0;
}
});
閃爍問題得到了臨時(shí)解決。
采用不可見元素減少 DOM 變更產(chǎn)生的運(yùn)算“臨時(shí)” 說法的原因是當(dāng) JS 數(shù)量再次增加,達(dá)到又一新高度后,閃爍問題再現(xiàn)。
原因大概是 $.addClass 時(shí)瀏覽器需要重新計(jì)算該元素位置, JS 數(shù)量過多使計(jì)算過程明顯。
不多說,在 HTML 里多放一個(gè)包含 .fixed 的寬高為 0 的元素即可解決。
</>復(fù)制代碼
別讓這個(gè) div.fixed 顯示出來。
至此,全面解決 “動(dòng)態(tài)添加樣式導(dǎo)致的元素閃爍” 。
原生 JS 進(jìn)一步加快速度避免閃爍jQuery 是個(gè)好東西。原生 JS 更是個(gè)好東西。
有些 jQuery 代碼,被轉(zhuǎn)化為好多條原生 JS 才實(shí)現(xiàn)效果。
然而其實(shí)只需要一條。
將 jQuery 代碼轉(zhuǎn)化為原生 JS 是個(gè)加快速度,避免閃爍的不二選擇。
</>復(fù)制代碼
var scroll=0;
var navST=60; //該元素距離網(wǎng)頁頂端60px
window.onscroll = function(){
if(document.documentElement.scrollTop || document.body.scrollTop>navST && scroll==0){
document.getElementsByTagName("nav")[0].classList.add("fixed");
scroll=1;
}
else if(document.documentElement.scrollTop || document.body.scrollTop<=navST && scroll==1){
document.getElementsByTagName("nav")[0].classList.remove("fixed");
scroll=0;
}
};
謝謝閱讀!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/111424.html
摘要:采用不可見元素減少變更產(chǎn)生的運(yùn)算臨時(shí)說法的原因是當(dāng)數(shù)量再次增加,達(dá)到又一新高度后,閃爍問題再現(xiàn)。至此,全面解決動(dòng)態(tài)添加樣式導(dǎo)致的元素閃爍。原生進(jìn)一步加快速度避免閃爍是個(gè)好東西。 元素閃爍很丑,難解決。 修改 Class 而不是 Style 我在不久前做過一個(gè)導(dǎo)航欄,要求其滾動(dòng)到屏幕頂端后固定。很常見。開始的時(shí)候沒問題,很快就可以搞定。 nav { position: absol...
摘要:的二大核心響應(yīng)式數(shù)據(jù)變化當(dāng)視圖發(fā)生改變,數(shù)據(jù)自動(dòng)更新。組合的視圖組件頁面映射為組件樹劃分組件可復(fù)用利于維護(hù)。正在不斷的學(xué)習(xí)中希望各位指點(diǎn)錯(cuò)誤,一起討論,一起進(jìn)步,后續(xù)更新中 Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,Vue的核心庫只關(guān)注視圖層,不僅容易上手,還便于與第三方庫既有項(xiàng)目整合,相互獨(dú)立而又可以任意整合。 showImg(https://segmentfault.com/img...
摘要:因?yàn)楫?dāng)文件放在頂部時(shí),頁面會(huì)逐步呈現(xiàn),有較好的用戶體驗(yàn),如果將文件放在底部,瀏覽器為了避免回流,會(huì)阻塞內(nèi)容的呈現(xiàn)。瀏覽器可能需要在本地存儲(chǔ)各種各樣的數(shù)據(jù),例如等。 瀏覽器是怎么渲染的? DOM樹+CSS規(guī)則樹—>渲染樹—調(diào)用系統(tǒng)GUI的API來繪制頁面 1)瀏覽器下載html文件之后,會(huì)根據(jù)html文件構(gòu)建DOM樹,其中css會(huì)構(gòu)建css規(guī)則樹,js會(huì)修改dom樹和css規(guī)則樹; ...
摘要:無論是否移動(dòng),元素仍然占據(jù)原來的空間。絕對定位絕對定位使元素的位置與文檔流無關(guān),因此不占據(jù)空間。 為啥讀這本書 現(xiàn)在前端圈子過于浮躁,掌握基礎(chǔ)無疑比掌握一個(gè)js框架重要 css怎么都能寫出來,但是要寫的好寫得快還得多讀書 css魔法推薦的,讀完這個(gè)讀讀css揭秘 當(dāng)然,根本原因還是覺得自己掌握不好 開始總結(jié)吧~ 一. 基礎(chǔ)知識(shí) 經(jīng)過上世紀(jì)沒有 css的痛苦時(shí)的混沌時(shí)期,人們開始了進(jìn)...
摘要:事件只針對輸入框值的真實(shí)修改,而不是通過來修改。指令將給定表達(dá)式的值替換元素的內(nèi)容。指令還有另外一種轉(zhuǎn)換方式,如果你有字符串?dāng)?shù)組希望在輸入框中顯示,你可以在上使用指令。 指令 Directive 指令系統(tǒng)(Directive)是Angular應(yīng)用的一個(gè)重要特性。 是通過對DOM元素的標(biāo)簽丶屬性來增強(qiáng)HTML表現(xiàn)力,為其增加一些特定功能。本篇參考文檔Angular菜鳥教程 內(nèi)置指令 這里...
閱讀 667·2021-09-24 09:48
閱讀 2501·2021-08-26 14:14
閱讀 526·2019-08-30 13:08
閱讀 1455·2019-08-29 15:22
閱讀 3089·2019-08-29 11:06
閱讀 1014·2019-08-26 18:26
閱讀 1072·2019-08-26 13:53
閱讀 2548·2019-08-26 12:21