我目前正在开始上的动画项目。 在项目中，我将有40000个多名div S和迭代动画。 如果有任何的div s为处于被动状态（即它不是动画至少2秒），我将不会显示他们增加动画性能。
现在的问题是：该CSS属性是最适合呢？
.passive1{
display:none
}
.passive2{
visibility:hidden;
}
.passive3{
opacity:0;
}
而且我怎么能衡量渲染喜欢FPS，GPU使用性能？
Answer 1:
找到答案在这里会回答你的第一个问题（最有可能display:none作为的空间被彻底崩溃）。
你的第二个问题，工具，比如这将可能对您有用。 但是40000的div听起来像是太多的，你会使用帆布或SVG可能有更好的性能（例如，使用KineticJS库作为该处理的动画-变换，旋转，缩放等）为您服务。
Answer 2:
他们都渲染元素无形的，但在不同是否占用的空间和消耗的点击
+--------------------+----------------+-----------------+
| Property | occupies space | consumes clicks |
+--------------------+----------------+-----------------+
| opacity: 0 | ✓ | ✓ |
+--------------------+----------------+-----------------+
| visibility: hidden | ✓ | ✗ |
+--------------------+----------------+-----------------+
| display: none | ✗ | ✗ |
+--------------------+----------------+-----------------+
✓: yes
✗: no
当我们说，它消耗的点击，这意味着它也消耗其他指针的事件，如onfocus此，onmousedown事件，的OnMouseMove等。
从本质上说“visibility：hidden的”行为像“不透明度：0”的组合和“指针事件：无”。
Answer 3:
display:none因为的div被取出的流动的话，因此它们的位置不必进行计算。
话虽这么说，40000点的div听起来很疯狂。 你有没有考虑像HTML5画布或SVG的选择吗？
Answer 4:
display:none将隐藏整个元件和布局空间移除而visibility:hidden隐藏的元素但正如前面占用同样的空间。
如果你想创建透明或褪色效果的不透明度可以使用。
Answer 5:
Perfomamce将是，如果显示的问题：none或visibility：hidden的被使用，因为它们触发在大多数浏览器的油漆和布局，这意味着你的浏览器将重画视口，每当这两个变化，所以我会建议不透明度，但仍然是这个数字的div它会的仍然没有perfomant预期，你可以使用库称为HTML-GL它使你的div在WebGL的检查尝试WebGL的https://github.com/PixelsCommander/HTML-GL
Answer 6:
有时我用的知名度和透明度，共同实现的效果，避免点击事件
如
正常状态/元件从屏幕中移除：
visibility:hidden;
opacity:0;
transition: all .3s;
在屏幕上悬停状态/元件：
visibility:visible;
opacity:1;
Answer 7:
display:none ：不占用空间，这里没有元素。
opacity:0 ：占用空间，你可以点击它后面元素。
visibility:hidden ：占用的空间，您不能单击其后面的元素。
文章来源: visibility:hidden vs display:none vs opacity:0
