为什么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 ms

court.draw（）花了0.984999999665888毫秒

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

court.draw（）花了29.77499999997235毫秒

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

court.draw（）花了1.5410000000920263 ms

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

court.draw（）花了0.3149999997767736毫秒

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

court.draw（）花了0.31399999988934724毫秒

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

court.draw（）花了9.191000000100757 ms

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

court.draw（）花了0.3160000001080334毫秒

自上次更新以来的时间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 ms自上一帧起的时间为10.18 ms

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

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

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

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

Answer 3

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

结论：

不绘图时：

我的代码需要大约15-16ms（需要稍微提高一点！）帧之间的刷新周期大约是20ms，因此即使不绘制，每帧也有4-5ms的开销...

绘图时：

我的代码需要大约28ms - > 12ms用于调用绘图方法刷新帧之间的间隔大约是65ms所以绘制时每帧有37ms的开销 - >在我自己的代码中的“前景”中> 12ms ---> 25ms在requestAnimationFrame（）调用之间的“背景”中

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

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