Pretext: новая библиотека для ускорения верстки текста в 500 раз
Pretext полностью меняет механизм размещения текста.
Обычно, каждый раз, когда браузеру нужно узнать размеры текстового блока, он запускает так называемый layout reflow — одну из самых дорогих операций в рендеринге.
Pretext полностью обходит этот процесс, реализуя собственную логику измерения текста на чистом JavaScript/TypeScript через Canvas API браузера. ⚡️
По бенчмаркам разработчика, подготовка 500 текстовых блоков занимает около 19 мс, а последующий расчёт их размещения — всего 0.09 мс, что даёт прирост производительности примерно в 500 раз по сравнению со стандартным DOM-подходом.📈
Библиотека поддерживает рендеринг в DOM, Canvas, SVG и в перспективе — серверный рендеринг.
Работает со всеми языками, включая арабскую вязь с двунаправленным текстом, иероглифы и эмодзи. 🌐
☝🏻Среди практических применений: виртуализация списков без костылей и приблизительных расчётов, обтекание текстом изображений как в журнальной вёрстке, многоколоночные макеты, предотвращение сдвигов при загрузке контента — всё это на скорости 120 fps прямо в браузере.
За менее чем двое суток после публикации репозиторий уже набрал около 6000 звёзд и 223 форка на GitHub.
Сам инженер написал в X, что считает Pretext одной из важнейших инфраструктурных разработок для UI-инженерии на ближайшие годы. 🔥