キャンバスにフォントが大きいとChromeで長時間掛かります

Question

誰かに気付いたことがありますか、私が経験している問題の解決策が見つかりましたか？ fillText（）を使用してキャンバスにChromeの大きなフォント（> 100ピクセル）を描画するには時間がかかります。私ははるかに速いフレームレートが必要ですが、一度フォントが大きくなると、各フレームを読み込むのに少し時間がかかります。 Firefoxでは、それはかかわらず、うまく動作します...

UPDATE：

ここに私の引き分けに間隔に10ミリ秒ごとに実行します（）関数を実行している適切なコードがあります。何かがあなたに飛び出すなら、それは素晴らしいことです。私はプロファイラーのことを試してみるつもりです、ありがとう。

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+' | '; 
          } 
         } 
        } 
       } 
      } 
     } 
    } 

Answer 1

は、私たちは、私がが大きなフォントがパフォーマンスの問題を引き起こしていただきました！実際にを描くことを確信していない、より多くの情報が必要と思います。このような大きなフォントを描くことは、私が試したブラウザのために私のマシン上で非常に迅速に動作します。

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

ctx.fontを何度も何度も繰り返し設定するなど、何かを呼びたくなる可能性があります。一部のブラウザでctx.fontを設定すると、実際にはfillRectへの呼び出しよりもかなり時間がかかります！アプリでフォントが変更された場合は、いつでもキャッシュすることができます。あなたは不必要にかかる時間を倍にフォントを設定するクロムの多くのバージョンでは、見ることができるようにhttp://jsperf.com/set-font-perf

：ここ

は、昨年10月からのテストです！だからできるだけ小さく（キャッシングなどで）設定してください。