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 ms

court.draw（）花了0.984999999665888 ms

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

court.draw（）花了29.77499999997235 ms

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

court.draw（）花了1.5410000000920263 ms

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

court.draw（）花了0.3149999997767736 ms

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

court.draw（）花了0.31399999988934724 ms

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

court.draw（）花了9.191000000100757 ms

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

court.draw（）花了0.3160000001080334 ms

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

court.draw（）花了0.3130000000091968 ms

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

court.draw（）花了0.3140000003404566 ms

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

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

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

Answer 1

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

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

Answer 2

我现在非常接近放弃，认为Chromecast很慢，全面停止。

我已经删除了所有的绘图代码，并且只有一个例程来计算一些东西，并且对JS类的方法进行了几次调用，这些方法很少。

定时和帧之间的时间我得到三帧的重复周期，帧间隔10ms，10ms和30ms - 平均50ms - 或大约60fps，这是可以的。

court.draw（）花了5.6939999999485735毫秒自上一帧起的时间为10.18 ms

court.draw（）花了5.745999999817286毫秒自上一帧起的时间10.55毫秒

court.draw（）花了5.739999999605061 ms 自上一帧起的时间29.22 ms

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

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

Answer 3

我已经检测了代码来测量主要调用，以及启用/禁用绘图调用（对canvas的调用context.ClearRect（）和context.FillRect（））

结论：

不画画时：

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

绘图时：

我的代码大约需要28毫秒 - ＆gt;调用绘图方法额外12ms 帧之间的刷新周期约为65毫秒所以绘图时每帧有37ms的开销 - ＆GT;它在我自己的代码中的“前景”中的12毫秒 ---＆GT;在对requestAnimationFrame（）

的调用之间的“背景”中的25ms

所以，即使我把自己的代码缩短到10ms（比方说），我怀疑它会将持续时间减少到60fps所需的16ms，因为（可能）背景工作是填充显示器上的像素而没有办法我可以减少更多....我只在必要时删除/绘制东西。

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

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

3 个答案: