CSS 过滤器在不同顺序的 Safari 上非常慢，有人可以解释一下吗？

Question

似乎 filter: none; 的位置/顺序对 Safari(速度)产生了巨大的影响。有人可以对发生的事情提供可靠的解释吗？

仅在 Safari 中检查以下两个示例

---

示例 1:(使用 filter: none; 在 CSS 规则的末尾，它在 Safari 上非常慢)

Example 1 (Slow on safari)

section#pitches>div>div:hover {
  opacity: 0.6;
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: none; /* IE 6-9 */
}

---

示例 2:(将 filter: none; 移动到其他浏览器特定过滤器之上，使其更快)

Example 2 (Much faster)

section#pitches>div>div:hover {
  opacity: 0.6;
  filter: grayscale(0%);
  filter: none; /* IE 6-9 */
  -webkit-filter: grayscale(0%);
}

我在网上搜索试图找到解释但没有成功？

我有我的猜测，但据我所知，如果看到 filter: none;?

，CSS 不会停止检查其他规则

Answer 1

您的主要问题是您实现 filter: none; 的方式(或者，您删除先前设置的灰度过滤器的方式)。你说得对:

as far as I know CSS does not STOP checking other rules if seen like filter: none;?

但这正是问题所在!似乎将过滤器设置为无比简单地将灰度更改回 0% 更耗费资源!

我在 Dudley Storey 所著的 Pro CSS3 Animation 一书中发现了一句话证实了这个假设:

“请注意，您无法顺利过渡到‘无’状态或未应用过滤器；必须为过滤器赋予新值”( Storey, 113 )

因此，在示例 1 中，Safari 正在读取 CSS，并且基本上只剩下删除所有过滤器而不是将灰度过滤器仅设置为 0 的劳动密集型壮举%。在示例 2 中，Safari 看到了 -webkit-filter: grayscale(0%); 最后，这意味着它是它执行的 CSS(并且执行起来更容易)。

虽然我认为这回答了问题，但我希望更多有经验的人分享他们的意见。我自己并不是很满意，因为有人告诉我惯例是将“通用”CSS 标签放在您自己的标签之前(将 -webkit、-moz、之前其他 CSS)，我在 Apple Safari 文档中找到的唯一信息是一个模糊的警告:

Filters are visual effects that can be applied to images and other HTML elements... These filters are resource-intensive. Use them sparingly and only when necessary. Be sure to test your content on a multitude of computers and devices to assert that rendering performance is not hampered, especially if animating. Source

最简单的(看起来也是最符合惯例的)是简单地完全删除 filter:none;，因为如果您要删除的唯一过滤器是灰度，那么它是多余的并且坦率地说是不必要的。

我希望它有所帮助，并且答案是连贯的。对我来说有点晚了，请原谅我的任何错误!