Javascript 可见性：隐藏vs显示：无vs不透明度：0

我目前正在着手一个动画项目。在这个项目中，我将拥有超过40000个

div

s，并以迭代方式对它们进行动画制作。如果

div

s中的任何一个处于被动状态（即至少2秒钟内没有动画），我不会显示它们以提高动画性能

问题是：哪一个css属性最适合这种情况

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

---

我如何衡量渲染性能，如fps、gpu使用情况？

显示：无

，因为DIV从流中取出，因此不必计算它们的位置

尽管如此，40000个div听起来很疯狂。你是否考虑过HTML5画布或SVG之类的选项？

< P>答案找到了你的第一个问题（最有可能的是代码>显示：没有“< /代码>空间完全崩溃”）。

---

对于第二个问题，诸如的工具可能对您有用。但是40000个div听起来太多了，使用canvas或SVG可能会有更好的性能（例如，使用库处理动画-变换、旋转、缩放等）为您。

显示：无

将隐藏整个元素并将其从布局空间中删除，而

可见性：隐藏

将隐藏一个元素，但占用与以前相同的空间。

---

如果要创建透明度或淡入淡出效果，可以使用不透明度

它们都使元素不可见，但在它是否占用空间和消耗点击量方面有所不同

+--------------------+----------------+-----------------+
| Property           | occupies space | consumes clicks |
+--------------------+----------------+-----------------+
| opacity: 0         |        ✓       |        ✓        |
+--------------------+----------------+-----------------+
| visibility: hidden |        ✓       |        ✗        |
+--------------------+----------------+-----------------+
| display: none      |        ✗       |        ✗        |
+--------------------+----------------+-----------------+

✓: yes
✗: no

当我们说它使用click时，这意味着它还使用其他指针事件，比如ondblclick、onmousedown、onmousemove等等

---

本质上，“可见性：隐藏”的行为类似于“不透明度：0”和“指针事件：无”的组合.

如果使用“显示：无”或“可见性：隐藏”，则性能将成为一个问题，因为在大多数浏览器中，它们会触发绘制和布局，这意味着您的浏览器将在这两个更改时重新绘制视口，因此我建议使用不透明度，但对于所需的div数，性能仍不如预期。您可以使用库尝试webgl称为html gl，它在webgl检查中呈现您的div，有时我使用可见性和不透明度来达到避免单击事件的效果

e、 g

从屏幕上删除的正常状态/元素：

visibility:hidden;
opacity:0;
transition: all .3s;

屏幕上的悬停状态/元素：

visibility:visible;
opacity:1;

---

以下是从各种答案中收集的经过验证的信息汇编

每个CSS属性实际上都是唯一的。除了渲染不可见的元素外，它们还具有以下附加效果：

折叠元素通常占据的空间

响应事件（例如，单击、按键）

参与选项卡顺序

折叠事件选项卡顺序 不透明度：0否是是 可见性：隐藏无 可见性：折叠*否 显示：无是否否 *在表元素中为“是”，否则为“否”。

---

来自

如果你的动画制作40000个div，你的性能将出现问题。也许你应该看看如何使用canvas/flash。我认为在canvas中编写这样的动画是很困难的，因为canvas中没有转换属性。画布中没有平移、旋转功能。在SVG中，更好的选择是生成SVG，然后将其转换为画布，并从DOM中删除旧的SVG。这将提高您的性能。我已经测试了这一点，并在中获得了很好的性能提升。谢谢。但是你对我的第二个问题什么也没说<代码>我如何衡量fps、gpu使用等渲染性能？这是因为我没有这方面的经验。但在谷歌的快速搜索中，一些浏览器插件出现了，你尝试过吗？我找到了一个。使用shift+esc显示任务管理器，其中显示内存、cpu、fps等。啊，我忘记了Chrome任务管理器。当然，它衡量一切：）适当的做法是将问题标记为重复问题，而不是链接到重复的答案。是404，我已经编辑了答案。相应地编辑。精彩的答案！！你先回答了这个问题，然后提出了一个更好的方法。我应该把这张表打印出来，贴在我的电脑显示器上。完美的答案！非常有用。解释再好不过了。请注意，可以使用例如jQuery来触发对不使用单击的元素的单击 collapse events taborder opacity: 0 No Yes Yes visibility: hidden No No No visibility: collapse * No No display: none Yes No No * Yes inside a table element, otherwise No.