HTML畫布性能 - 導入圖像或繪製畫布

Question

對於這種複雜性/簡單性的圖像，創建PNG並將其導入畫布或繪製路徑並填充到畫布上會更好嗎？

http://www.freeiconsdownload.com/site-images/Large/developer_icons_452x336.jpg

Answer 1

對於畫布，一般來說，它是幾乎總是比從PNG /內存中畫出來更好，而不是構建和繪製路徑。（見腳註）Here's some simple data.我們在這裏討論的因素是10。對於簡單的東西。

特別是如果你要一遍又一遍地繪製這些物體，每秒60次。

和特別是當text is involved。

由於複雜的畫布生成的形狀，一些注重性能的人已將它們預渲染到內存中的畫布上，然後從畫布繪製到畫布（使用drawImage），而不是每次重新創建路徑。這在很多情況下都是值得的，但是當然沒有什麼可以打敗分析和計時你自己的具體情況。

不要錯過課程，但我只想提醒大家，在你（幾乎）完成了你的Canvas應用程序之前，你可能不應該擔心這類事情。

「我們應該忘記小的效率，講的時候約97％：過早的優化是所有罪惡的根源」 -Knuth

一個大一點要注意的是，很多的應用程序中，繪製這些按鈕的性能可能不甚重要（或者沒有明顯的差異），並且您可能不想擔心哪種方式更快，直到您已完成Canvas應用程序的第一次迭代並正在處理「波蘭，波蘭，波蘭」更新。

---

有些人可能不知道，當上飛渲染路徑是更好的，它可能是顯而易見的，但大多數情況下它是不是我給它一提。當然有時候就是這樣的道路渲染：交互路徑，例如在繪製程序和動畫時出現的路徑，其中下一幀不是另一個靜止圖像，而是路徑的附加。這些以及更多 - 任何你想用每一幀更新路徑本身的地方 - 都是你想要保留路徑的地方，而不是試圖預渲染任何東西。

Answer 2

我想，每個瀏覽器將執行不同的，它很可能是最好寫一個快速的基準，所花費的時間長提請說，每種類型的1000。

這就是說，就易用性而言，如果你已經有了PNG，爲什麼不按原樣使用它們。