对于不同顺序的Safari,CSS过滤器很慢,有人可以解释一下吗？

看起来像过滤器的位置/顺序：无;在Safari(速度)上有很大的不同.有人可以对发生的事情提供一个可靠的解释吗？

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

示例1 :(使用filter：none;在CSS规则结束时,它在Safari上非常慢)

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

示例2 :(移动过滤器：无;高于其他浏览器特定的过滤器使其快得多)

Example 2 (Much faster)

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

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

我有我的猜测,但据我所知CSS不会停止检查其他规则,如果看起来像filter：none;？

解决方法

您的主要问题是您实施过滤器的方式：无; (或者,您删除先前设置的灰度滤镜的方式).你这样说是对的：

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

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

我在Dudley Storey的Pro CSS3 Animation一书中找到了一个引用,证实了这一假设：

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

因此,在示例1中,Safari正在读取CSS并且基本上留下了更加劳动密集的删除所有过滤器的壮举,而不是仅将灰度过滤器设置为0％.在示例2中,Safari看到-webkit-filter：灰度(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. 07001

最简单的(也是最符合惯例的)就是简单地删除filter：none;完全,因为它是多余的,如果您要删除的唯一过滤器是灰度,则坦率地说是不必要的.

我希望它有所帮助,答案是连贯的.这对我来说有点晚了,所以请原谅我有任何错误！

原文地址：https://www.jb51.cc/css/215826.html

对于不同顺序的Safari,CSS过滤器很慢,有人可以解释一下吗？

解决方法

相关推荐