我目前正在开始一个动画项目。在该项目中，我将有超过 40000div秒并迭代地为它们设置动画。如果divs 中的任何一个处于被动状态（即它至少有 2 秒没有动画），我将不会显示它们以提高动画性能。
问题是：哪个css属性最适合这个？
.passive1{
display:none
}
.passive2{
visibility:hidden;
}
.passive3{
opacity:0;
}
以及如何衡量渲染性能，如 fps、gpu 使用情况？
可见性：隐藏与显示：无与不透明度：0
IT技术
javascript
css
performance
animation
render
2021-02-19 16:49:16
6个回答
它们都使元素不可见，但在是否占用空间和消耗点击方面有所不同
+--------------------+----------------+-----------------+
| Property | occupies space | consumes clicks |
+--------------------+----------------+-----------------+
| opacity: 0 | ✓ | ✓ |
+--------------------+----------------+-----------------+
| visibility: hidden | ✓ | ✗ |
+--------------------+----------------+-----------------+
| display: none | ✗ | ✗ |
+--------------------+----------------+-----------------+
✓: yes
✗: no
当我们说它消耗点击时，这意味着它也消耗其他指针事件，如 ondblclick、onmousedown、onmousemove 等。
本质上，“可见性：隐藏”的行为类似于“不透明度：0”和“指针事件：无”的组合。
如果使用 display:none 或visibility:hidden ，则性能将是一个问题，因为它们会在大多数浏览器中触发绘制和布局，这意味着您的浏览器将在这两个更改时重新绘制视口，因此我会推荐不透明度，但仍然会为该数量的 div仍然没有达到预期的效果，您可以使用名为 html-gl 的库尝试 webgl，该库在 webgl 中呈现您的 div 检查https://github.com/PixelsCommander/HTML-GL
这是来自各种答案的经过验证的信息的汇编。
这些 CSS 属性中的每一个实际上都是独一无二的。除了使元素不可见之外，它们还具有以下附加效果：
- 折叠元素通常占用的空间
- 响应事件（例如，单击、按键）
- 参加taborder
折叠事件标签 不透明度：0 否 是 是 可见性：隐藏 否 否 否 可见性：折叠 * 否 否 显示：无 是 否 否 * 在表格元素内是，否则否。
来自链接
display:none将隐藏整个元素并将其从布局空间中删除，而visibility:hidden隐藏一个元素但占用与以前相同的空间。
如果要创建透明度或淡入淡出效果，可以使用不透明度。
其它你可能感兴趣的问题