Большие шрифты на холсте занимают много времени в Chrome

Question

кто-нибудь заметил или нашел решение проблемы, с которой я столкнулся?Отрисовка больших шрифтов (> 100 пикселей) в Chrome на холсте с помощью fillText () занимает много времени.Мне нужно иметь гораздо более высокую частоту кадров, но как только шрифты станут большими, загрузка каждого кадра займет всего одну секунду.В 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!Если ваш шрифт изменяется в приложении, вы всегда можете кешировать.

Вот тест с октября: http://jsperf.com/set-font-perf

Как вы можете видеть, во многих версиях Chrome установка шрифта излишне удваиваетвремя, которое требуется!Поэтому убедитесь, что вы установили его как можно меньше (с кэшированием и т. Д.).