javascript - 是用JS替换图片src好，还是用CSS滤镜来操作好？

Question

我有一个带图标的按钮，其来源是 ~4kb 的 SVG。当我将鼠标悬停在按钮上时，我希望图标颜色反转，从黑色变为白色。要实现这种效果，是不是像这样使用 CSS 比较好:

#btn:hover #icon-img {
    -webkit-filter: invert(1);
    filter: invert(1); 
}

...还是直接操作图像源并像这样添加白色版本的图标更好(例如更快/最佳实践/更好的内存力)？

document.getElementById('btn').addEventListener('mouseover', (e) => {
    document.getElementById('icon-img').src = 'white-image.svg';
}

Answer 1

根据经验，CSS 解决方案比基于 JS 的解决方案更好。

CSS 的主要问题(特别是关于新奇特的功能)是支持:

Browser support for filter property (MDN)

如您所见，如果您想支持 IE(尽管 Internet Explorer 4.0 到 9.0 实现了一个非标准且已弃用的筛选器属性)，您就不走运了。

正如@guest271314 所指出的，您的 JS 解决方案将触发对服务器的新请求...您可以考虑使用 Sprite 或数据 URI 来避免它。