javascript - 如何更快或同时申请类(class)？

Question

我有一个 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 中，这些类会先一帧应用到第一个元素，这会导致屏幕闪烁。

是否有某种方法可以让我同时应用所有元素，或者至少使应用程序显着更快？

Answer 1

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

请将您的代码封装到requestAnimationFrame()中就像这样:

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

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

<小时/>

性能

在闪烁情况下，此异步 Hook 将比同步代码快得多。因为浏览器不会花时间在重新布局和重绘(下一帧显示)上，这会花费大量时间

(此代码在非闪烁情况下也能提供相同的性能，99.9999999% 确定)

<小时/>

证明

https://codepen.io/anon/pen/JvdZbN?editors=1111