为什么要用用visibility:hidden;代替display:none;?因为后者更加消耗浏览器:

css绘制画面有两种形式:repaint 和reflow,当我们更改css属相如background时,浏览器只需repaint就行,dom节点的大小、位置均未发生改变,我理解为:原地不动只是换个颜色填充而已。这时的开销就小。

当我们操作dom节点要改变其大小和位置时,对浏览器来说就比较麻烦了,必须要进行reflow,重新定位,重新布局,只不过对于现在的电脑硬件和高版本浏览器来说这倒不是显而易见的性能问题,但作为开发人员,核心的价值和最大的满足感就是节省了内存,优化了效率。

SO,这也是本文标题的原因。visibility:hidden;对浏览器来说只需一次repaint就OK。但display:none;浏览器要进行reflow,也就是要销毁原先绘制的frame,然后还要再次重绘frame,浪费,不环保。

好,说了这么多,那么问题来了,挖掘机。。。。不!怎样才能减少浏览器开销呢?

那就要尽量改动让浏览器用repaint就能完成的属性,少改动那些要做大手术的属性。实不相瞒,对dom节点的增删改都是大手术。尤其是动画,当初年少无知,为了追求刺激,总搞一些没啥用途的大而空的乱串特效,想必浏览器也挺辛苦吧。还有少用表格,表格总是牵一发而动全身,开销更大。

以后可以这么干:对要多次修改的dom元素,尽量一步到位,我用的是先设置一个空的class如.XX{aa:num; bb:num; cc:num},然后用js直接更改其dom的classname属性为XX即可。此外,优化的方法从各个方面各个角度,还有很多很多,写这篇博客时的我目前还处于菜鸟阶段,关于优化问题总结的很多很杂,具体说不出个123来,这个知识点对我的意义就是:别拿浏览器不当干部,要尽可能的让她干的轻松(没错,是“她”),为此以后要养成时刻优化代码的习惯,不以善小而不为。

为什么要用visibility:hidden;代替display:none;?的更多相关文章

  1. 再谈visibility:hidden和display:none

    之前写过一篇有关visibility:hidden和display:none的文章:为什么要用用visibility:hidden;代替display:none;?主要是从浏览器性能方面入手,却没写两 ...

  2. 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别

    其实这是一个老问题了,s visibility:hidden 与 display:none 共同点就是都会似的元素不可见.但是 visibility:hidden 的DOM元素是占用空间的,会挤占其他 ...

  3. What is the difference between visibility:hidden and display:none?

    What is the difference between visibility:hidden and display:none? 答案1 display:none means that the t ...

  4. visibility:hidden和display:none的区别

    大家知道,如果想让某一段代码在前台不显示,最简单的方法是用css的display:none即可,这样下边的内容就自动上移或右侧的左移来填补这个空隙. 但特殊情况下我们只需要隐藏这个元素,但它的位置不能 ...

  5. visibility: hidden 和 display: none的区别

    相同点: 两者都可以将dom元素隐藏 不同点: 1.display: none 隐藏之后不占用文档流,而visibility: hidden却会占用文档流,如果要在隐藏元素的同时获取其尺寸信息,那就可 ...

  6. css 中visibility:hidden和display:none有什么区别呢

    <div style="width:100px;height:100px;background:red;visibility:hidden"></div>/ ...

  7. 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

    总结: 结构: display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击, visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是 ...

  8. visibility: hidden和 display: none的区别

    visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着. display: none----将元素的显示设为无,即在网页中不占任何的位置.

  9. display:none和visibility:hidden两者的区别

    display与元素的隐藏 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式.隐藏后的元素无法点击,无法使用屏幕阅读器 ...

随机推荐

  1. Python Django开发 1

    先配置个虚拟环境,在Flask第一篇文章有写,这里就跳过了 比如我的Django的目录是:C:\Workspaces\DjangoDemo,已经安装好了名为venv虚拟目录,接下来安装django框架 ...

  2. 【转】基于CXF Java 搭建Web Service (Restful Web Service与基于SOAP的Web Service混合方案)

    转载:http://www.cnblogs.com/windwithlife/archive/2013/03/03/2942157.html 一,选择一个合适的,Web开发环境: 我选择的是Eclip ...

  3. `cocos2dx非完整` 日志模块 增量更新

    在上一篇文章中,说到了"流程"的由来,以及我对流程的使用. 这一片就是对流程的应用.前一篇文章中说到了三条流程 check_log_measure, check_env_measu ...

  4. 我也想聊聊 OAuth 2.0 —— 基本概念

    这是一篇待在草稿箱半年之久的文章 连我自己都不知道我的草稿箱有多少未发布的文章了.这应该是我在上一家公司未解散之前写的,记得当时是要做一个开发者中心,很不幸. 今天,打开草稿箱有种莫名的伤感,看到这个 ...

  5. dock基本使用

    通过Docker源安装最新版本通过Docker源安装最新版本 要安装最新的 Docker 版本,首先需要安装 apt-transport-https 支持,之后通过添加源来安装.要安装最新的 Dock ...

  6. UINavigationItem和UItabBarItem的区别详解

    一.UINavigationItem 1> 获得方式 self.navigationItem // self是指控制器 2> 作用 可以用来设置当前控制器顶部导航栏的内容 // 设置导航栏 ...

  7. sprint 1 总结

    1.之前已经总结了一下了.. 提前完成了任务,明天还要继续测试一下,看有没有BUG.这次搭建,遇到好多问题,服务器经常不稳定崩毁,毕竟免费...不能完美..途中经常小细节没注意,导致错误连连,卡了好几 ...

  8. MVC,布局页面

    一>>> 在_ViewStart.cshtml文件中,加入: @{ Layout = "~/Views/Shared/_Layout.cshtml"; PageD ...

  9. Vector Clock/Version Clock

    physical clock 机器上的物理时钟,不同的机器在同一个时间点取到的physical clock不一样,之间会存在一定的误差,NTP可以用来控制这个误差,同一个机房内的机器之间的时钟误差可以 ...

  10. las数据集加载las数据

    引用的类库:ESRI.ArcGIS.GeoDatabaseExtensions 逻辑步骤: 1.创建las数据集(ILasDataset). 2.实例化las数据集的编辑器(ILasDatasetEd ...