Javascript 如何更快或模拟地应用类？

我有一个DOM元素数组，就像其中的5个

this.children = Array.from(wrapper.children)

在给定事件中，我循环遍历元素并有条件地应用不同的类：

this.children.forEach((child, i) => {
    let classes = child.classList;
    classes.toggle('flic-before', i < s+1);
    classes.toggle('flic-active', i === s);
    classes.toggle('flic-previous', i === s-1);
    classes.toggle('flic-next', i === s+1);
})

这在所有浏览器中都能正常工作，因为javascript速度足够快，css不会更新。但在iPhone中，这些类在一帧之前应用于第一个元素，这会导致屏幕上出现闪烁

有什么方法可以让我同时应用所有元素，或者至少让应用程序运行得更快吗？

函数允许您定义必须在下次渲染之前立即执行的代码。不可能只优化这个代码块，因为数组长度将来可能会改变。这种方法保证屏幕上没有闪烁

请将您的代码包装成如下所示：

window.requestAnimationFrame(() => {
    // Please NOTE that this code will be executed asynchronously
    this.children.forEach((child, i) => {
        let classes = child.classList;
        classes.toggle('flic-before', i < s+1);
        classes.toggle('flic-active', i === s);
        classes.toggle('flic-previous', i === s-1);
        classes.toggle('flic-next', i === s+1);
    });
});

这将保证在更新过程中不会向用户显示任何内容

演出

在闪烁情况下，这个异步钩子将比同步代码快得多。因为浏览器不会花费大量时间重新显示和重新绘制下一帧显示

此外，该代码在非闪烁情况下也具有相同的性能，99.9999999%确定

证明

---

我认为微增益不值得牺牲可读性，而这正是在1中完成这一切所需要的。你可以分离它们，应用更改，然后重新连接它们。但是这可能会在iphone上引起闪烁。你能提供一个演示来复制这个问题吗？一个砰的一声，等等？我不明白为什么它被否决了。您需要将代码包装到requestAnimationFrame中，以确保更新过程中间的注释将被呈现并对人们可见。很可能它被否决了，因为它实际上只是一个仅链接的答案，实际上应该只是一个注释。我想这里的问题是forEach循环占用了太多时间。为什么异步钩子明显比同步代码快？如果这是这个问题的解决方案，一些可靠的信息和/或演示会很有帮助。@estus更新、添加注释、注释、解释性能等。还有什么吗？谢谢。我并不是真的要求你在这方面花时间，只是想知道你手头是否有具体的阅读材料或例子，可以对这个主题有所帮助。如果OP能够为这个问题提供有效的例子，我希望这个案例变得更加清晰。