Javascript 为什么对某些帧多次调用requestAnimation frame，而对其他帧则根本不调用？

我有一个redux应用程序，它使用

requestAnimationFrame

在每个刻度上呈现一个新的状态，但是Google Chrome似乎对某些刻度调用了

requestAnimationFrame

多达3次（！！），而对其他刻度则根本没有，导致了janky动画

在React开发模式中： 在React

NODE\u ENV=production

模式下：

它已经以60fps的速度渲染，因此每16ms帧有多个不必要的

requestAnimationFrame

回调会极大地浪费CPU资源。没有刻度的帧也会导致动画延迟。我的tick函数只需要4ms来计算（远远低于16ms的预算），并且我在页面上只运行了一个回调

下面是动画代码，它处理在每次滴答声时发送我的redux调用

class AnimationHandler {
    constructor(store) {
        this.store = store
        this.animating = false
        store.subscribe(::this.handleStateChange)
    }
    handleStateChange() {
        if (!this.animating) {
            this.tick()
        }
    }
    tick(timestamp) {
        this.animating = true
        this.store.dispatch({
            type: 'TICK',
            current_timestamp: (new Date).getTime(),
            // reducer handles updating rendered state to this point in time
        })
        window.requestAnimationFrame(::this.tick)
    }
}

window.animations = new AnimationHandler(window.store)  // redux store

---

是什么原因导致Chrome这样做，我如何使它在渲染的每帧中都有一个一致的

tick（）

调用，没有更多，也没有更少？

有同样的问题！您找到答案了吗？当我开始使用

NODE\u ENV=production

环境变量在生产模式下编译React时，情况变得更好了。不幸的是，我从未找到根本原因。