转载

逐步解决动态添加样式导致的元素闪烁

元素闪烁很丑,难解决。

修改 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 的元素即可解决。

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

别让这个 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;
    }
};

谢谢阅读!

原文  https://segmentfault.com/a/1190000006216880
正文到此结束
Loading...