为什么用JavaScript切换图像可见性会变慢/需要重新绘制？

我在我的网站上有一些图片相互堆叠（绝对定位在相对DIV内）。我喜欢在mousemove事件中切换这些图像。我尝试了添加/删除CSS类。到目前为止，这是可行的。然而，在Chromes Timeline中，我看到相当长的重绘，包括每个事件上的“图像解码”和“图像大小调整”。我尝试了不同的“隐藏技术”，如“显示：无”、“可见性：隐藏”和“z索引：0”。切换显示或可见性并没有什么不同，但zIndex版本花了很长时间，因为每个图像都会被重新绘制。所以我在这里结巴。如何切换可见性而不重新绘制？至少不需要图像解码了？！下面是我在JS中的代码片段：

var currentImgElem = document.getElementById(elem_id_curr);
var showImgElem = document.getElementById(elem_id_show);

currentImgElem.classList.add("hide");
showImgElem.classList.remove("hide");

鉴于“隐藏”是指：

display:none;
visibility:hidden;
z-Index:0;

---

还有一个困惑：当我在画布上绘制图像时，一切都很好

我有一种感觉，你可能会遇到另一个全局风格问题，CSS3阴影等会在当前浏览器中导致各种昂贵且似乎不必要的重新绘制行为，但无论如何，如果这些东西不起作用，即使它们应该起作用，有一件事你还没有尝试过，那就是在一个位置上设置一个高的负边距：相对元素理论上，这不应该导致回流或重新绘制，尽管浏览器在技术上可以在他们选择的任何时间进行这些操作。如果你设了一把小提琴，我们都可以试一下，看看什么能一起工作。谢谢你的页边空白提示，我们很快就会尝试的。这里有一些技巧：然而，我没有使用任何花哨的JS或CSS。所有这些都非常基本。嘿，Plynx，我尝试了保证金技巧，但它显示了同样的问题。我有大约220ms的绘画，120ms用于图像解码，100ms用于调整大小。所以这和切换显示或可见性是一样的；我想没有图像资源，也没有调用javascript。我要尝试的是直接设置样式，而不是修改类。这应该是设置某些元素（如可见性）的一种不太侵入性的方式。类似于

currentImgElem.style.visibility=“hidden”；showImgElem.style.visibility=“”也许这会帮助它知道您没有潜在地更改任何样式属性，只更改可见性。