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

陈江龙发布于2019-08-29 11:06 / 3030人阅读

摘要：采用不可见元素减少变更产生的运算临时说法的原因是当数量再次增加，达到又一新高度后，闪烁问题再现。至此，全面解决动态添加样式导致的元素闪烁。原生进一步加快速度避免闪烁是个好东西。

元素闪烁很丑，难解决。

修改 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 屏幕闪烁解决

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111424.html

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

摘要：采用不可见元素减少变更产生的运算临时说法的原因是当数量再次增加，达到又一新高度后，闪烁问题再现。至此，全面解决动态添加样式导致的元素闪烁。原生进一步加快速度避免闪烁是个好东西。元素闪烁很丑，难解决。修改 Class 而不是 Style 我在不久前做过一个导航栏，要求其滚动到屏幕顶端后固定。很常见。开始的时候没问题，很快就可以搞定。 nav { position: absol...

CodeSheep 2019-08-21 14:14 评论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