Оптимизация самый быстрый вывод текста

[RX200]

Есть массив с координатами, обновляется движением мыши, то есть двигается на экране мышью. вобщем суть в том что на экран выводятся текстовые поля с координатами, за раз в крайних случаях 100 - 200 тысяч текстовых полей. причем текст с фоном, пробовал три варианта, самым медленным был SVG, далее HTML(span), и самый быстрый Canvas, но всеравно тормозит, какой самый быстрый способ вывода текстовых полей вы знаете? Текстовые поля с фоном, полей порядка 100 - 200 тысяч, каждое поле при каждом смещении, меняет свой текст и координаты.
Вот пример части самого быстрого кода.

// arr_c_g[i] = [x, y, text]; arr_c_g.length примерно 100000
// width_t_2 = width_t / 2;
// height_t_2 = height_t + 2;
let out_text = () => {
	context.clearRect(0, 0, width, height);
	context.fillStyle = "#fff";
	for(let i = 0; i < arr_c_g.length; i++)context.fillRect(arr_c_g[i][0] - width_t_2, arr_c_g[i][1] - height_t, width_t, height_t_2);// Фон
	context.fillStyle = "#000";
	for(let i = 0; i < arr_c_g.length; i++)context.fillText(arr_c_g[i][2], arr_c_g[i][0], arr_c_g[i][1]);// текст
};

Есть ли чтонибудь быстрее?

[Alexandroppolus]

в крайних случаях 100 - 200 тысяч текстовых полей.

"текстовые поля" - это просто прямоугольнички с текстом, а не <input type="text" /> , которые пользователю надо заполнять? ))) Самый быстрый вывод на экран - webgl.
но подозреваю, что далеко не все поля видны на экране. Надо определять, какие не видны, и их не рисовать, наверно так.

[RX200]

те которые невидны итак не выводятся, там масштабирование, наверное придется лимит ставить, при некотором масштабе, или фон выводить только, пока не решил как. За webgl спасибо, попробую в нем реализовать посмотрю что будет.

[RX200]

Самый быстрый вывод на экран - webgl.

Почитал про технологию, это сразу много способов добавления текста, причем достаточно сложных, нужно или библиотеки в которых непонятно что, или лезть на уровень ниже. Читал тут и тут. Везде если можно обойтись без 3д рекомендуют использовать тот способ который я щас использую. По этому хочу уточнить, именно для моей задачи какой способ WebGL подойдет лучше?

[Nexus]

RX200, вы существенно можете выиграть в производительности, если будете рисовать фон и текст не в разных циклах, а в одном.

Любая технология покажется недостаточно хорошей, если пользоваться ею... неправильно.

[RX200]

RX200, вы существенно можете выиграть в производительности, если будете рисовать фон и текст не в разных циклах, а в одном.

то есть в теле цыкла будет еще и.
context.fillStyle = "#fff";
и
context.fillStyle = "#000";
при каждой интеракции? или как?

Протестировал в Mozilla Firefox примерно на 30% стало медленнее, если в одном цикле.

[voraa]

Не знаю всех условий задачи, но если эти прямоугольники с текстом могут пересекаться, то только в одном цикле и надо делать.
Какой у вас получается порядок цифр (времени) при выводе 100000? Сколько на одну итерацию?

[Alexandroppolus]

наверное придется лимит ставить, при некотором масштабе, или фон выводить только

да, в эту сторону думать. Вообще, как я понял по коду, все рамки одного размера? Как вообще это выглядит? они выстраиваются в сетку? или одни рамки могут быть поверх других?

и как происходит обновление массива движением мыши? все поинты обновляются? меняется ли текст? Возможно, перерисовывать надо только часть экрана

[Aetae]

И все эти 100 - 200 тысяч полей видны и читабельны для юзаера одновременно? Сомневаюсь.
Если есть те которые не видны - не выводить их.
Если есть те которые не читабельны - не выводить в них текст.

А по поводу того что webgl - сложна, так само собой: максимальная оптимизация за пределами стандарта - всегда сложно. И библиотеки тут как раз не нужны - нужно именно написание низкоуровневого кода максимально заточенного под задачу без излишеств и абстракций.

[RX200]

да, в эту сторону думать. Вообще, как я понял по коду, все рамки одного размера? Как вообще это выглядит? они выстраиваются в сетку? или одни рамки могут быть поверх других?

и как происходит обновление массива движением мыши? все поинты обновляются? меняется ли текст? Возможно, перерисовывать надо только часть экрана

Да при движении мыши обновляется и массив координат, и тексты. причем координаты в массиве это не + смещение мыши, а сложные вычисления.
Да сетка, рамки не могут быть по верх других, ну или незначительно, там перед цыклами масштаб настраивается, вобщем в итоге сделал что если шрифт в context.font становится меньше 5 то не отображаются, текст исчезает. Это крайней случай когда пользователь нажмет отображать текст на мелком масштабе, но щас единственное что мне не нравится, это если нажмет отображать текст при мелком масштабе, то ни чего не изменится, то есть будет выглядеть словно кнопка не работает. но при увеличении масштаба текст появится. В общем, в целом пока задача решена так.
Насчет, webgl или opengl, я давно еще до их появления работал с o3d, скорее всего справились бы с задачей, но сложны в настройки, и по времени много займет написание кода, так что пока их не стану использовать, в будущем если время будет может на них переделаю.