国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

逐步解決動(dòng)態(tài)添加樣式導(dǎo)致的元素閃爍

陳江龍 / 3088人閱讀

摘要:采用不可見元素減少變更產(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ù)制代碼

  1. nav {
  2. position: absolute;
  3. top: 60px;
  4. }

</>復(fù)制代碼

  1. var scroll=0;
  2. var nav=$("nav");
  3. var navST=60; //該元素距離網(wǎng)頁頂端60px
  4. $(window).scroll(function(){
  5. if($(document).scrollTop()>navST && scroll==0){
  6. nav.css({position: "fixed",top: "0"});
  7. scroll=1;
  8. }
  9. else if($(document).scrollTop()<=navST && scroll==1){
  10. nav.removeAttr("style");
  11. scroll=0;
  12. }
  13. });

運(yùn)行很流暢。

做好,我自然就忙著網(wǎng)頁內(nèi)容去了。沒曾想,隨著頁面 JS 的不斷增加,導(dǎo)航欄在固定時(shí)出現(xiàn)了可怕的閃動(dòng)。

</>復(fù)制代碼

  1. 唔,就是 一下看得見 一下看不見 的東西!

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

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

</>復(fù)制代碼

  1. 元素重繪

就在這千萬分之一秒,億萬分之一秒 里,我理解了:

</>復(fù)制代碼

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

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

使用 $.addClass 語句可以解決。

</>復(fù)制代碼

  1. nav {
  2. position: absolute;
  3. top: 60px;
  4. }
  5. .fixed {
  6. position: fixed;
  7. top: 0;
  8. }

</>復(fù)制代碼

  1. var scroll=0;
  2. var nav=$("nav");
  3. var navST=60; //該元素距離網(wǎng)頁頂端60px
  4. $(window).scroll(function(){
  5. if($(document).scrollTop()>navST && scroll==0){
  6. nav.addClass("fixed");
  7. scroll=1;
  8. }
  9. else if($(document).scrollTop()<=navST && scroll==1){
  10. nav.removeClass("fixed");
  11. scroll=0;
  12. }
  13. });

閃爍問題得到了臨時(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ù)制代碼

  1. var scroll=0;
  2. var navST=60; //該元素距離網(wǎng)頁頂端60px
  3. window.onscroll = function(){
  4. if(document.documentElement.scrollTop || document.body.scrollTop>navST && scroll==0){
  5. document.getElementsByTagName("nav")[0].classList.add("fixed");
  6. scroll=1;
  7. }
  8. else if(document.documentElement.scrollTop || document.body.scrollTop<=navST && scroll==1){
  9. document.getElementsByTagName("nav")[0].classList.remove("fixed");
  10. scroll=0;
  11. }
  12. };

謝謝閱讀!

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/111424.html

相關(guān)文章

  • 逐步解決動(dòng)態(tài)添加樣式導(dǎo)致元素閃爍

    摘要:采用不可見元素減少變更產(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...

    CodeSheep 評(píng)論0 收藏0
  • vue 起步

    摘要:的二大核心響應(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...

    hyuan 評(píng)論0 收藏0
  • 瀏覽器性能

    摘要:因?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ī)則樹; ...

    Coly 評(píng)論0 收藏0
  • 讀后總結(jié)--精通css高級(jí)web標(biāo)準(zhǔn)解決方案(第二版)

    摘要:無論是否移動(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)...

    leone 評(píng)論0 收藏0
  • AngularJs功能(六)--指令

    摘要:事件只針對輸入框值的真實(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)置指令 這里...

    Mertens 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<