为什么要用visibility:hidden;代替display:none;？

为什么要用用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来，这个知识点对我的意义就是：别拿浏览器不当干部，要尽可能的让她干的轻松（没错，是“她”），为此以后要养成时刻优化代码的习惯，不以善小而不为。

转载于:https://www.cnblogs.com/chayangge/p/4288707.html