似乎filter: none;的位置/顺序对Safari(速度)产生了巨大的影响。有人能对发生的事情提供可靠的解释吗？
仅在 Safari 中检查以下两个示例
示例 1：(在 CSS 规则末尾加上filter: none;，在 Safari 上非常慢)
示例 1(在 safari 上慢)
section#pitches>div>div:hover {
opacity: 0.6;
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none; /* IE 6-9 */
}
示例 2：(将filter: none;移动到其他特定于浏览器的过滤器上方，使其速度更快)
示例 2(速度更快)
section#pitches>div>div:hover {
opacity: 0.6;
filter: grayscale(0%);
filter: none; /* IE 6-9 */
-webkit-filter: grayscale(0%);
}
我在网上搜索试图找到解释，但没有运气？
我有我的猜测，但据我所知，如果看到filter: none;CSS，不会停止检查其他规则？
您的主要问题是实现filter: none;的方式(或者删除先前设置的灰度滤镜的方式)。你说得对：
据我所知，如果看到 CSS 不会停止检查其他规则 过滤器：无;？
但这正是问题所在！似乎将滤镜设置为无比简单地将灰度更改回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文档上找到的唯一信息是一个模糊的警告：
滤镜是可应用于图像和其他图像的视觉效果 HTML 元素...这些筛选器会占用大量资源。使用它们 谨慎且仅在必要时。请务必在 大量计算机和设备来断言该渲染 性能不会受到阻碍，尤其是在制作动画时。源
最简单(似乎最符合惯例)是简单地完全删除filter:none;，因为如果您要删除的唯一过滤器是灰度，那么它是多余的，坦率地说是不必要的。
我希望它有所帮助，并且答案是连贯的。对我来说有点晚了，所以请原谅我的任何错误！
在模糊元素上使用 CSS 属性
transform: translateZ(0)
使 CSS 在 GPU 上呈现