文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS过滤器是非常慢的Safari与不同的顺序，谁能解释？

问CSS过滤器是非常慢的Safari与不同的顺序，谁能解释？
EN

Stack Overflow用户

提问于 2017-06-20 20:27:03

回答 2查看 4K关注 0票数 9

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

只在中检查以下两个示例

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

示例1(慢速进行狩猎)

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%);
}

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

我有我的猜测，但据我所知，CSS并没有停止检查其他规则，如果看到像filter: none;

css

safari

css-filters

回答 2

Stack Overflow用户

发布于 2017-07-13 06:56:07

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

据我所知，CSS并没有停止检查其他规则，如果像过滤器:无；？

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

我在达德利·斯托里的“CSS3动画”一书中找到了一句话，证实了这一假设：

“请注意，您不能平稳地过渡到'none‘或没有应用筛选器的状态；必须给过滤器一个新的值”(113层 )

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

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

过滤器是视觉效果，可以应用于图像和其他HTML元素.这些过滤器是资源密集型的。尽量少用，必要时才使用。一定要在多台计算机和设备上测试您的内容，以确保呈现性能不会受到影响，特别是在动画化的情况下。来源

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

我希望这能有所帮助，而且答案是连贯的。对我来说有点晚了，所以请原谅我的任何错误！

票数 4

Stack Overflow用户

发布于 2021-04-09 14:01:00

在带模糊的元素上使用CSS属性

transform: translateZ(0)

使CSS在GPU上呈现

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44662417

复制

相似问题

问CSS过滤器是非常慢的Safari与不同的顺序，谁能解释？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS过滤器是非常慢的Safari与不同的顺序，谁能解释？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS过滤器是非常慢的Safari与不同的顺序，谁能解释？
EN