在webkit浏览器中通过Javascript使用CSS重新绘制

我一直在编写一个幻灯片脚本，它使用CSS3转换，或者jQuery的动画（当它们不可用时）。我已经创建了一个自定义函数来制作幻灯片动画，这样做很恰当。一切似乎都很好，但我在测试中遇到了一个重大障碍

出于这样或那样的原因，在大型幻灯片的转换前后应用jQuery CSS会有很大的延迟。例如，下面链接中的幻灯片宽度约为9900像素（容器宽度，其中大部分是隐藏的）。使用CSS3转换和变换属性操纵容器以显示适当的幻灯片。延迟发生在下面粘贴的第75-82行之间应用CSS。特别是，应用“转换”CSS会导致问题。将“transition”CSS添加到样式表中（而不是将其与JS一起应用），延迟就会消失。然而，这并不是一个真正的解决方案，因为我们只希望在特定的属性上使用CSS3转换，这可能会有所不同（在样式表中使用“all”将转换一些我们不想设置动画的CSS，但会定期更改）

动画功能：

幻灯片演示：

真正的问题在于iOS，在iOS中，幻灯片（有时甚至是浏览器）变得完全不可用。我不能精确地指出任何错误，并且已经耗尽了调试JS的知识。我敢肯定，在玩了一点之后，它与函数的这一部分有关，在插件中禁用CSS3支持完全可以消除这个问题

我完全陷入困境，非常感谢任何人能给予我的帮助

---编辑---

我已经尝试使用本机Javascript而不是jQuery的.CSS函数来应用CSS。同样的结果，没有更好的性能。同样值得注意的是，这在Firefox中根本没有发生，而且似乎只是Webkit浏览器的一个问题

任何有解决方案的人，都会乐意为几瓶啤酒捐款！我真的搞不懂

---第二次编辑---

好的，我们已经调试过了，我可以看出，速度减慢是由浏览器重新绘制周期造成的，这需要很长时间。有没有比现在更好的方法来处理这个问题？定位元素绝对是减少重绘的一种已知方法，但这并没有真正起作用，因为幻灯片是响应性的。绝对定位幻灯片图像或幻灯片本身会导致幻灯片崩溃

---第三次编辑---

一天后，我取得了一些进展。将“transition:all 0s ease”添加到元素样式表CSS中，消除了由于通过原始帖子中提到的自定义动画函数添加内联CSS transition属性而导致的重新绘制。这会带来显著的性能提升，尤其是在转换本身完成后删除内联CSS转换属性时

好东西！但是，现在在转换之后删除内联CSS转换（用于创建硬件加速转换效果本身）并应用左定位时，仍然会出现速度减慢。当两者同时发生时，就会出现减速

---

将它们分为两个单独的任务（删除翻译，然后在setTimeout中添加左侧位置，没有指定时间），再次摆脱重绘=性能增益，看起来问题已经解决。但是有时候，CSS转换属性没有足够快地被否定，并且翻译移除会被动画化。不好，而且不知道下一步该去哪里解决它。

我认为问题在于你正在加载巨大的图像：）

它们对于容器来说太大了，所以你可以缩小它们的尺寸，这会更加占用资源

---

尝试调整它们的大小。

首先祝贺您的调试！ 我最近一直在研究完全相同的东西，发现ios设备不支持在同一页面中放置大量图像。它会导致崩溃，我找到的唯一解决方案是删除元素，而不仅仅是隐藏它们。缺点是删除和附加元素会导致延迟，因此在完成转换时，您必须巧妙地执行此操作。我认为最好的方法是在DOM中保留3到5个图像，并用图像的缩略图替换其余的图像，调整大小以适合原始图像。当转换完成后，我会将大图像放回原位。。。

---

希望这至少对你的ios问题有点帮助…

不确定这是否有帮助，但我注意到你使用了3d翻译-我认为简单的2d翻译就足够了，特别是因为你的第三个参数是0，可能会加速问题，也可以像Armel L建议的那样使用更少的图像。不过，没有iphone要测试。。。或者，这是我在css3之前使用的一个解决方案，但仍然可以通过修改左侧（？和顶部-演示仅向左和向右移动？没有过渡效果）来使用javascript移动包含图像的元素，这样您就可以微调刷新率，我认为这可能是导致速度减慢的原因。。。你可以在没有人注意到的情况下低至18fps，甚至可能只需16fps就足够了。在用Chrome开发工具分析代码时间线之后，我相信你可以做一些优化

据我所知，每次请求动画时，16幅图像中的每一幅都会被完全重新绘制。这对我来说似乎很明显，因为在您的示例中有16个图像，Chrome开发工具在每次点击“下一步”时都会报告16个长“绘制”执行

依我的拙见，你应该找到一个只考虑翻译两幅图像的解决方案：一幅你想隐藏的图像和一幅你想展示的图像。因此，请考虑，不要移动其余的图像，而是把它们并排地放在所显示的图像上。

一个上午