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

Why does chromecast take so long between animation frames

本文关键字：长时间 之间 chromecast 动画 为什么      更新时间：2023-11-28

我正在开发一款游戏，它在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 ms

court.draw（）花费0.984999999665888毫秒

自上次更新以来的时间89.35899999960384 ms

court.draw（）花费29.77499999997235毫秒

自上次更新以来的时间106.3719999973382 ms

court.draw（）花费1.5410000000920263毫秒

自上次更新以来的时间93.464999992375 ms

court.draw（）花费0.3149999997767736毫秒

自上次更新以来的时间91.99499999977706 ms

court.draw（）花费0.31399999988934724毫秒

自上次更新以来的时间126.3730000000578 ms

court.draw（）花费9.191000000100757毫秒

自上次更新以来的时间104.5799999999726 ms

court.draw（）花费了0.316000001080334毫秒

自上次更新以来的时间99.06599999976606 ms

court.draw（）花费了0.313000000091968 ms

自上次更新以来的时间94.06499999977677 ms

court.draw（）花费了0.314000003404566毫秒

自上次更新以来的时间88.65700000023935 ms

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

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

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

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

我现在几乎要放弃了，得出的结论是Chromecast速度慢，完全停止。

我已经删除了所有的绘图代码，并有一个只计算几件事的例程，以及对JS类上的方法的几次调用，这些调用几乎没有什么作用。

计时和帧间时间我得到三帧的重复周期，帧间时间为10ms、10ms和30ms，平均50ms，或约60fps，这是可以的

court.draw（）耗时5.6939999999485735毫秒自上一帧以来的时间10.18 ms

court.draw（）耗时5.745999999817286毫秒自上一帧以来的时间10.55 ms

court.draw（）耗时5.7399999999605061毫秒自上一帧以来的时间29.22毫秒

在我的代码中，每帧只需清除并绘制一个代表一个球的非常小的矩形，时间就会缩短到25ms，帧与帧之间的时间会缩短到70ms。。。。让它慢得令人难以忍受。。。

由于没有任何工具来进一步了解为什么它如此缓慢，我觉得我现在只是在浪费时间。。

我已插入代码以测量主调用，并启用/禁用绘图调用（对context.ClearRect（）和context的调用）。FillRect（用于画布）

结论：

不绘制时：

我的代码大约需要15-16ms（需要改进一下！）帧之间的刷新周期约为20ms因此即使不绘制，每帧也有4-5ms的开销。。。

绘制时：

我的代码调用绘图方法需要大约28毫秒-->12毫秒的额外时间帧之间的刷新周期约为65ms因此绘制时每帧有37ms的开销-->在我自己的代码中，它在"前景"中的12毫秒--->在调用requestAnimationFrame（）之间的"后台"中有25毫秒

因此，即使我把自己的代码降到10ms（比如说），我也怀疑它会把60fps所需的时间减少到16ms，因为（大概）背景工作是填充显示器上的像素，我无法再减少更多。。。。我只是在绝对必要的时候才移除/绘制东西。

我在画布上画1、2或3个小盒子，用单色。。。。不确定是否还有一些额外的画布绘制技巧我可以尝试？

相关文章：