修改 Class 而不是 Style

我在不久前做過(guò)一個(gè)導(dǎo)航欄，要求其滾動(dòng)到屏幕頂端后固定。很常見(jiàn)。開始的時(shí)候沒(méi)問(wèn)題，很快就可以搞定。

nav {position: absolute;top: 60px; } var scroll=0; var nav=$("nav"); var navST=60; //該元素距離網(wǎng)頁(yè)頂端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)頁(yè)內(nèi)容去了。沒(méi)曾想，隨著頁(yè)面 JS 的不斷增加，導(dǎo)航欄在固定時(shí)出現(xiàn)了可怕的閃動(dòng)。

唔，就是 一下看得見(jiàn) 一下看不見(jiàn) 的東西！

應(yīng)該有不少人和我一樣。百度，無(wú)果。谷歌，看不懂，翻譯也不行。
不知道真相的我，眼淚 流下來(lái)。

哦！一道莫名的亮光從我的眼前閃過(guò)！這道亮光里，有希望，，有興奮，，組成了四個(gè)大字：

元素重繪

就在這千萬(wàn)分之一秒，億萬(wàn)分之一秒 里，我理解了：

nav.css({position:?"fixed",top:?"0"});

這一句 JS 產(chǎn)生了兩次 DOM 寫入，影響瀏覽器渲染頁(yè)面兩次。

使用 $.addClass 語(yǔ)句可以解決。

nav {position: absolute;top: 60px; } .fixed { position: fixed; top: 0; } var scroll=0; var nav=$("nav"); var navST=60; //該元素距離網(wǎng)頁(yè)頂端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; } });

閃爍問(wèn)題得到了臨時(shí)解決。

采用不可見(jiàn)元素減少 DOM 變更產(chǎn)生的運(yùn)算

“臨時(shí)” 說(shuō)法的原因是當(dāng) JS 數(shù)量再次增加，達(dá)到又一新高度后，閃爍問(wèn)題再現(xiàn)。
原因大概是 $.addClass 時(shí)瀏覽器需要重新計(jì)算該元素位置， JS 數(shù)量過(guò)多使計(jì)算過(guò)程明顯。
不多說(shuō)，在 HTML 里多放一個(gè)包含 .fixed 的寬高為 0 的元素即可解決。

<div class="fixed"></div> <nav>something...</nav>

別讓這個(gè) div.fixed 顯示出來(lái)。

至此，全面解決 “動(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è)加快速度，避免閃爍的不二選擇。

var scroll=0; var navST=60; //該元素距離網(wǎng)頁(yè)頂端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; } };

謝謝閱讀！

https://segmentfault.com/a/1190000006216880

轉(zhuǎn)載于:https://www.cnblogs.com/hubgit/p/8057975.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的解决前端页面闪烁问题（转载）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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