javascript - 为什么 chromecast 在动画帧之间需要这么长时间

Question

我正在开发一款游戏，它在我的 Mac 上的 chrome 上运行非常流畅，但在我的 chromecast 上运行速度非常慢。我已经对 JS 进行了相当多的优化。

我认为这只是 chromecast 中的低功耗硬件，再加上较慢的 JS。

但是经过调查，在 JS 中使用性能对象似乎被调用的动画帧之间的延迟比我的代码花费的时间长得多。

Court.prototype.update = function () {
if (!window.court.paused) {
    if (window.debug) {
        console.log('time since last update ' + (performance.now() - window.start) + ' ms');
    }
    window.start = performance.now();
    
    window.court.draw(); // my drawing routing
    
    var end = performance.now();
    if (window.debug) {
        console.log('to exit court.draw() took ' + (end - window.start) + ' ms');
    }

    // reschedule next animation update
    window.requestAnimationFrame(window.court.update);
}
};

当我运行该代码并按照 chromecast 的控制台输出进行操作时，我得到了这个:

自上次更新以来的时间 89.75099999998201 毫秒

court.draw() 耗时 0.984999999665888 毫秒

自上次更新以来的时间 89.35899999960384 毫秒

court.draw() 耗时 29.77499999997235 毫秒

自上次更新以来的时间 106.37199999973382 毫秒

court.draw() 耗时 1.5410000000920263 毫秒

自上次更新以来的时间 93.46499999992375 毫秒

court.draw() 耗时 0.3149999997767736 毫秒

自上次更新以来的时间 91.99499999977706 毫秒

court.draw() 耗时 0.31399999988934724 毫秒

自上次更新以来的时间 126.3730000000578 毫秒

court.draw() 耗时 9.191000000100757 毫秒

自上次更新以来的时间 104.55799999999726 毫秒

court.draw() 耗时 0.3160000001080334 毫秒

自上次更新以来的时间 99.06599999976606 毫秒

court.draw() 耗时 0.3130000000091968 毫秒

自上次更新以来的时间 94.06499999977677 毫秒

court.draw() 耗时 0.3140000003404566 毫秒

自上次更新以来的时间 88.65700000023935 毫秒

因此，我的绘图例程需要 1 到 30 毫秒，但动画帧大约每 100 毫秒调用一次，以提供 10fps 的最大刷新率。

有没有办法让 chromecast 降低刷新率？

Answer 1

我们已经能够使用 requestAnimationFrame 在 Chromecast 上获得 30FPS。为设备优化代码非常重要。积极地重复使用对象，不要在游戏循环中分配对象或添加新属性。

我建议从不使用任何代码的基本 requestAnimationFrame 处理程序开始，以获得基准性能。然后开始添加您的动画逻辑并使用 Chrome 开发工具来测量和查找瓶颈。