逐步解決動態添加樣式導致的元素閃爍

CodeSheep 發布于2019-08-21 14:14 / 833人閱讀

摘要：采用不可見元素減少變更產生的運算臨時說法的原因是當數量再次增加，達到又一新高度后，閃爍問題再現。至此，全面解決動態添加樣式導致的元素閃爍。原生進一步加快速度避免閃爍是個好東西。

元素閃爍很丑，難解決。

修改 Class 而不是 Style

我在不久前做過一個導航欄，要求其滾動到屏幕頂端后固定。很常見。開始的時候沒問題，很快就可以搞定。

nav {
    position: absolute;
    top: 60px;
}

var scroll=0;
var nav=$("nav");
var navST=60; //該元素距離網頁頂端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;
    }
});

運行很流暢。

做好，我自然就忙著網頁內容去了。沒曾想，隨著頁面 JS 的不斷增加，導航欄在固定時出現了可怕的閃動。

唔，就是一下看得見一下看不見的東西！

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

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

元素重繪

就在這千萬分之一秒，億萬分之一秒里，我理解了：

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

這一句 JS 產生了兩次 DOM 寫入，影響瀏覽器渲染頁面兩次。

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

nav {
    position: absolute;
    top: 60px;
}
.fixed {
    position: fixed;
    top: 0;
}

var scroll=0;
var nav=$("nav");
var navST=60; //該元素距離網頁頂端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;
    }
});

閃爍問題得到了臨時解決。

采用不可見元素減少 DOM 變更產生的運算

“臨時” 說法的原因是當 JS 數量再次增加，達到又一新高度后，閃爍問題再現。
原因大概是 $.addClass 時瀏覽器需要重新計算該元素位置， JS 數量過多使計算過程明顯。
不多說，在 HTML 里多放一個包含 .fixed 的寬高為 0 的元素即可解決。


something...

別讓這個 div.fixed 顯示出來。

至此，全面解決 “動態添加樣式導致的元素閃爍” 。

原生 JS 進一步加快速度避免閃爍

jQuery 是個好東西。原生 JS 更是個好東西。

有些 jQuery 代碼，被轉化為好多條原生 JS 才實現效果。
然而其實只需要一條。
將 jQuery 代碼轉化為原生 JS 是個加快速度，避免閃爍的不二選擇。

var scroll=0;
var navST=60; //該元素距離網頁頂端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;
    }
};

謝謝閱讀！

云服務器 GPU云服務器 php動態添加元素元素的樣式 div添加元素的js 屏幕閃爍解決

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87818.html

逐步解決動態添加樣式導致的元素閃爍

摘要：采用不可見元素減少變更產生的運算臨時說法的原因是當數量再次增加，達到又一新高度后，閃爍問題再現。至此，全面解決動態添加樣式導致的元素閃爍。原生進一步加快速度避免閃爍是個好東西。元素閃爍很丑，難解決。修改 Class 而不是 Style 我在不久前做過一個導航欄，要求其滾動到屏幕頂端后固定。很常見。開始的時候沒問題，很快就可以搞定。 nav { position: absol...

陳江龍 2019-08-29 11:06 評論0 收藏0
vue 起步

摘要：的二大核心響應式數據變化當視圖發生改變，數據自動更新。組合的視圖組件頁面映射為組件樹劃分組件可復用利于維護。正在不斷的學習中希望各位指點錯誤，一起討論，一起進步，后續更新中 Vue是一套用于構建用戶界面的漸進式框架，Vue的核心庫只關注視圖層，不僅容易上手，還便于與第三方庫既有項目整合，相互獨立而又可以任意整合。 showImg(https://segmentfault.com/img...

hyuan 2019-08-26 11:49 評論0 收藏0
瀏覽器性能

摘要：因為當文件放在頂部時，頁面會逐步呈現，有較好的用戶體驗，如果將文件放在底部，瀏覽器為了避免回流，會阻塞內容的呈現。瀏覽器可能需要在本地存儲各種各樣的數據，例如等。瀏覽器是怎么渲染的？ DOM樹+CSS規則樹—>渲染樹—調用系統GUI的API來繪制頁面 1）瀏覽器下載html文件之后，會根據html文件構建DOM樹，其中css會構建css規則樹，js會修改dom樹和css規則樹； ...

Coly 2019-08-23 12:21 評論0 收藏0
讀后總結--精通css高級web標準解決方案（第二版）

摘要：無論是否移動，元素仍然占據原來的空間。絕對定位絕對定位使元素的位置與文檔流無關，因此不占據空間。為啥讀這本書現在前端圈子過于浮躁，掌握基礎無疑比掌握一個js框架重要 css怎么都能寫出來，但是要寫的好寫得快還得多讀書 css魔法推薦的，讀完這個讀讀css揭秘當然，根本原因還是覺得自己掌握不好開始總結吧~ 一. 基礎知識經過上世紀沒有 css的痛苦時的混沌時期，人們開始了進...

leone 2019-08-30 13:05 評論0 收藏0
AngularJs功能（六）--指令

摘要：事件只針對輸入框值的真實修改，而不是通過來修改。指令將給定表達式的值替換元素的內容。指令還有另外一種轉換方式，如果你有字符串數組希望在輸入框中顯示，你可以在上使用指令。指令 Directive 指令系統（Directive）是Angular應用的一個重要特性。是通過對DOM元素的標簽丶屬性來增強HTML表現力，為其增加一些特定功能。本篇參考文檔Angular菜鳥教程內置指令這里...

Mertens 2019-08-22 13:59 評論0 收藏0