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

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

性能

这种异步挂钩比闪烁情况下的同步代码快得多。因为浏览器不会花时间重新布局并重新绘制（下一帧显示），这需要花费大量时间

（此代码在非闪烁情况下也具有相同的性能，99.9999999％肯定）

PROOF

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

如何更快或同时应用课程？

1 个答案: