html - Canvas 上的大字体在 Chrome 中需要很长时间

Question

有没有人注意到或找到解决我遇到的问题的方法？在 Chrome 中使用 fillText() 在 Canvas 上渲染大字体 (>100px) 需要很长时间。我需要更快的帧速率，但是一旦字体变大，加载每一帧就需要一秒钟的时间。虽然在 Firefox 中它运行良好......

更新:

这是在我的 draw() 函数中运行的相关代码，它每 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 花费的时间要长得多!如果您的应用程序中的字体发生变化，您可以随时缓存。

这是 10 月份的测试:http://jsperf.com/set-font-perf

如您所见，在许多版本的 Chrome 中，设置字体不必要地增加了一倍的时间!因此，请确保尽可能少地设置它(使用缓存等)。