為什么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個小盒子，單色......不確定是否有一些額外的畫布繪制技巧我可以試試？