頁面上的多個畫布。優化問題

我有一個很長的頁面與多個畫布。它們不會彼此重疊，並且大多數情況下單獨用於PIXI.js來播放spritesheet。頁面上的多個畫布。優化問題

我用來渲染每個畫布。

我有幾個問題，因爲我不確定如何優化。

1）當畫布離屏時，是否需要cancelAnimationFrame？或者它沒有關係，因爲它在屏幕外，因此不會被着色？

2）我應該在同一個requestAnimationFrame中使用我所有的render函數嗎？這會提高性能嗎？

其他建議？

2015-06-23 Terence Chow

在我看來，即使在屏幕上不可見時，requestAnimationFrame（）也會觸發，它不僅會使窗口最小化或者導航到其他選項卡。所以你可能會通過取消時贏取一些毫秒，但我真的不確定你會贏得任何東西，只有一個電話。爲了測試性能，你可以使用['performance.now（）']（https://developer.mozilla.org/en-US/docs/Web/API/Performance/now） – Kaiido

@Kaiido謝謝你。我爲什麼使用performance.now（）？把它放在請求動畫幀中，看看我有多少fps？ –

mdn的例子看起來挺有前途的：你在你的例程開始時存儲第一個performance.now（），並在最後減去一個新的對performance.now（）的調用;你有足夠的時間以毫秒爲單位執行代碼。像這樣你可以比較不同的實現。 – Kaiido

評論提供了大部分的信息，讓我還是回答所有的點：

自然是一個窗口，而不是帆布方法。因此它不知道畫布的可見性。 WebKit中有「元素」參數，但它不在當前規範http://www.w3.org/TR/animation-timing/#requestAnimationFrame中。因此，有多個處理程序沒有好處，如果您只有一個負責整個流程，它將提高性能。
如果選項卡根本不可見，則瀏覽器（在Safari/FF/Chrome上測試）不會調用。手動取消動畫幀請求沒有多大好處。
PIXI未在renderer.render(stage)中檢查畫布可見性。您可以使用getBoundingClientRect在渲染之前檢查畫布可見性。這可能增加相當多的表現。 How to tell if a DOM element is visible in the current viewport?

描述此特定場景的最佳方式可能是通過Chrome時間軸視圖https://developer.chrome.com/devtools/docs/timeline。動畫跳過可能會減少瀏覽器複合/繪製時間。只檢查javascript執行時間可能有點誤導，特別是如果我們記得WebGL調用可能異步執行。

來源

2015-09-07 18:05:17 sbat

頁面上的多個畫布。優化問題

回答

相關問題