私は現在、canvas要素を使用したゲーム用の2Dグラフィックエンジンを開発しています。このエンジンでは、さまざまなスプライトにテキストラベルが付いています。パフォーマンスを向上させるためにプロファイリングを行ったところ、このエンジンで最大のFPSイーターは、すべてのフレームにこれらのテキストラベルを描画するための呼び出しcontext.fillTextであることに気付きました。contex.drawTextベクターベースのTTFフォントのラスタライズは簡単な作業ではないため、これはパフォーマンスのフックであることが理解できます。だから私はレンダリングされたテキストをキャッシュすることでこれを改善する方法を探しています。
私が試したこと
ただし、これを高速化するために、各テキストラベルを一度描画し、結果をキャッシュして、代わりにこれらのキャッシュされた結果を描画することができます。そこで、初めて必要になったときに、各テキストラベルを非表示のキャンバスに描画しようとしました。ただし、そのためには、レンダリングされたテキストの幅と高さを知って、適切なサイズの背景キャンバスを作成できるようにする必要があります。私はこれをで取得しようとしましたcontext.measureTextが、残念ながら多くのブラウザはそれを完全に実装していません（Firefoxは幅のみを返し、高さなどは返しません）。
私が試したもう1つのことは、ブラウザのHTMLレンダリングエンジンにテキストキャッシュを処理させることでした。そのため、キャンバスでテキストラベルを描画する代わりに、を使用してHTML<span>要素を作成しposition:absolute、それらをキャンバス内のキャンバスに追加して、<div>常に必要な場所に配置されるようにすべてのフレーム内でこれらを移動しました。この種の機能はパフォーマンス面で機能しましたが、他にも多くの問題が発生します。回避できるものもありますが（クリックイベントをキャッチするテキストラベル、キャンバスの外側にテキストが描画される）、簡単に修正できないものもあります（キャンバスがテキストの上に描画できない）。だから私はこの解決策を捨てました。
他に何ができるか考えていますか？