Конвертируем цвета в JS со скоростью 6 миллиардов операций в секунду

Значимый прорыв формирует отрасль ИИ: dmkryak 14 часов назад Конвертируем цвета в JS со скоростью 6 миллиардов операций в секунду 5 мин 5. 9K JavaScript * WebGL * Canvas * Кейс Из песочницы Конвертируем цвета в JS со скоростью 6 миллиардов операций в секундуВ начале этого года я создал @colordx/core, самую быструю JS‑библиотеку для работы с цветом: парсинг различных форматов, конвертация в OKLAB/OKLCH, проверка попадания в P3-гамут и многое другое. Библиотека весит всего 7 КБ и не имеет внешних зависимостей.

Высокую скорость обеспечили оптимизации под V8: мономорфизм, скрытые классы, ноль лишних аллокаций. Для повседневных задач (один цвет по клику, по ховеру, при парсинге CSS‑значения) этого более чем достаточно. На Apple M4 конвертация HEX в OKLCH занимает ~200 нс, что даёт около 5 миллионов операций в секунду на одном ядре.

Технические детали

Для реалтайм‑рендера картина другая. Если экран показывает срез цветового пространства и перекрашивается заново на каждом кадре, каждый пиксель требует своей собственной конвертации. Даже скромное окно 1024×1024 на 60 fps, это уже больше миллиона пикселей за кадр или более 60 миллионов конвертаций в секунду.

Разница между 5 млн и 60 млн, это на порядок больше. Мы упираемся в чистую математику, и сократить число операций физически невозможно. Зато мы можем поменять архитектуру и выбрать лучший инструмент, который был создан, чтобы решать такие задачи.

Так родилась идея @colordx/gpu (Репозиторий на Гитхабе). Разница в архитектуре CPU и GPUЦентральный процессор, это небольшое число очень умных ядер. Даже у топовых CPU в мощном ноутбуке количество ядер сильно ограничено и не превышает двух десятков.

Отраслевые последствия

Каждое умеет предсказывать ветвления, спекулятивно исполнять инструкции, эффективно гонять многоуровневый кэш. Идеальная архитектура для последовательной логики: разбор JSON, обход дерева, запрос к базе. У GPU ядер на порядки больше: у RTX 5090, например, 21 760 CUDA‑ядер.

Но каждое из этих ядер по отдельности слабее, чем у CPU: тактовая частота у GPU держится в районе 1,5–2,5 ГГц против 2-5+ у CPU, и одно ядро CPU выполнит одну сложную задачу быстрее одного ядра GPU. Если сравнивать ядро с ядром, GPU проигрывает. Его преимущество не в качестве, а в количестве: тысячи слабых ядер разом работают над одной задачей, пока CPU обрабатывает её последовательно на нескольких сильных.

Поэтому для конвертации одного цвета GPU просто невыгоден: значение нужно передать, посчитать и отправить обратно. Сама передача между чипами стоит дороже, чем расчёт. Для миллионов пикселей та же передача размазывается на всех сразу: тысячи ядер GPU считают тысячи пикселей одновременно, и здесь GPU выигрывает на порядки.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.