html - キャンバス上の大きなフォントがChromeで長時間かかる

html google-chrome canvas fonts size

私が経験している問題の解決策に気づいたり見つけたりした人はいますか? fillText()を使用してキャンバス上のChromeで大きなフォント(> 100px)をレンダリングするのに長い時間がかかります。ずっと速いフレームレートが必要ですが、フォントが大きくなると、各フレームをロードするのに1秒ほどかかります。 Firefoxでも問題なく動作します...

更新:

間隔で10ミリ秒ごとに実行される私のdraw()関数で実行されている関連コードは次のとおりです。何かが出てきたら、それは素晴らしいことです。私はプロファイラーのことを試してみます、ありがとう。

 g.font = Math.floor(zoom) + "px sans-serif";
    g.fillStyle = "rgba(233,233,245," + (ZOOM_MAX-zoom*(zoom*0.01))/(ZOOM_MAX) + ")";
    for (h=0; h<76; h++)
    {
        h_offset = 2.75*h*Math.floor(zoom);

        // only render if will be visible, because it tends to lag; especially in Chrome
        hpos = Math.floor(half_width + std_offset + h_offset);

        if (hpos > (-half_width)-h_offset && hpos < WIDTH+h_offset)
        {
            g.fillText(1950+h, hpos, anchor_y - 0);
        }
    }

    g.font = "600 " + Math.floor(zoom/40) + "px sans-serif";
    g.fillStyle = "rgba(233,233,245," + (ZOOM_MAX-zoom*(zoom*0.0001))/(ZOOM_MAX) + ")";
    for (h=0; h<76; h++)
    {
        h_offset = 2.75*h*Math.floor(zoom);

        hpos = Math.floor(half_width + std_offset + h_offset);

        if (hpos > (-half_width)-h_offset && hpos < WIDTH+h_offset)
        {                
            // see if we should bother showing months (or will it be too small anyways)
            if (zoom/40 > 2)
            {
                // show months
                for (i=0; i<12; i++)
                {
                    i_offset = 0.175*i*zoom;
                    ipos = Math.floor(WIDTH/2 + std_offset + i_offset + h_offset) + 10;

                    if (ipos > -half_width && ipos < WIDTH)
                    {
                        g.fillText(months[i], ipos, anchor_y - 20);
                    }
                }
            }
        }
    }


    g.font = "600 " + Math.floor(zoom/350) + "px sans-serif";
    g.fillStyle = "rgba(233,233,245," + (ZOOM_MAX-zoom/5)/(ZOOM_MAX*2.25) + ")";
    for (h=0; h<76; h++)
    {
        h_offset = 2.75*h*Math.floor(zoom);

        // only render if will be visible, because it tends to lag; especially in Chrome
        hpos = Math.floor(half_width + std_offset + h_offset);

        if (hpos > (-half_width)-h_offset && hpos < WIDTH+h_offset)
        {                
            // see if we should bother showing months (or will it be too small anyways)
            if (zoom/40 > 2)
            {
                // show months
                for (i=0; i<12; i++)
                {
                    i_offset = 0.175*i*zoom;
                    ipos = Math.floor(WIDTH/2 + std_offset + i_offset + h_offset) + 10;

                    // see if we should bother showing days (or will it be too small anyways)
                    if (zoom/350 > 2)
                    {
                        // show days
                        for (j=0; j<31; j++)
                        {
                            j_offset = 0.005*j*zoom + zoom*0.005;
                            jpos = Math.floor(half_width + std_offset + j_offset + i_offset + h_offset);

                            if (jpos > -half_width && jpos < WIDTH)
                            {
                                g.fillText(days[i][j], jpos, anchor_y - 20);
                                selected_days += 'm: '+i+', d: '+j+' | ';
                            }
                        }
                    }
                }
            }
        }
    }
答え
もっと多くの情報が必要です。大きなフォントを描画することが実際にパフォーマンスの問題を引き起こしているとは思いません。このような大きなフォントの描画は、私のマシンで非常にすばやく動作しますが、私が試したどのブラウザでも動作します。

最初にすべきことは、Chromeプロファイラーを開いてコードを実行し、実際にctx.fillText呼び出しで時間がかかっているかどうかを確認することです。実際には別の何かを想像します。

ctx.fontを不必要に何度も設定するなど、呼び出しすぎている可能性があります。一部のブラウザでctx.fontを設定すると、実際にはfillRectの呼び出しよりもかなり時間がかかります。アプリでフォントが変更された場合、いつでもキャッシュできます。

10月のテスト結果は次のとおりです。http://jsperf.com/set-font-perf

ご覧のとおり、Chromeの多くのバージョンでは、フォントを設定すると、必要な時間が2倍になります。したがって、(キャッシングなどで)できるだけ少なく設定するようにしてください。
関連記事

html - FacebookのサイトでのFB_HiddenContainer div要素の用途は何ですか?

jquery - クリックイベントを含む複数のドロップダウンメニュー

html - display:inlineを含むHTML liタグがIE7でブロックとして表示される

html - IEの頭痛-CSS:first-childセレクターが機能せず、Google Web Fontsを使用した奇妙な動作

android - 多数のテキスト行とスタイルを持つEditTextで2Dスクロールを有効にします

html - CSS / HTML:IE9 + jsFiddleの配置の問題

html - <TD>セルに背景画像が表示されない

html - cssでメニュー項目の幅を自動的に計算する

php - php / htmlにフレームのような構造を作成しますか?

html - GoogleマップとHTML 5 GeoLocationから国コードを取得する