Cheng Lou, инженер Midjourney и бывший участник команды React, выпустил Pretext.js, библиотеку на TypeScript весом 15 КБ, которая позволяет обходить дорогостоящие рефлоуы в DOM. Это достижение позволяет достижения скорости до 120 FPS и поддерживает сложные UX/UI паттерны, такие как бесконечные списки и «мезонинные» макеты.
Проблема традиционного подхода
В веб-разработке для вычисления высоты текста, например, для виртуализированных списков или мезонинных решёток, обычно используют запросы к Document Object Model (DOM). Однако это вызывает рефлоуы, что приводит к значительному снижению производительности. При сложных страницах или ограниченной быстрой рендеринга рефлоу может вызвать падение отображаемых кадров и замедление интерфейса.
Преимущества Pretext.js
Pretext.js полностью исключает рефлоу. Библиотека использует два этапа: на первом — prepare() — вызывается API Canvas для анализа текста и определения ширины каждого элемента без обращения к DOM. Эти эти кэшируются, что позволяет минимизировать расходы на повторные вычисления. Второй этап — layout() — основывается на кэшированных данных, позволяя мгновенно изменять количество строк и высоту текста в зависимости от размера контейнера.
Производительность тестов показывает, что один вызов layout() на 500 блоках текста занимает всего 0,09 миллисекунды, что делает этот метод в 600 раз быстрее традиционных подходов. Это позволяет поддерживать 120 кадров в секунду даже при динамическом обертывании текста в реальном времени.
Значение для разработчиков
Для разработчиков это — открытие: возможность создавать более отзывчивые приложения без затрат на производительность. Особенно это актуально для B2C приложений, где пользовательский опыт критически важен для успеха на рынке. С внедрением Pretext.js команды могут улучшить интерфейсы, используя сложные паттерны без риска снижения скорости.
Следующий шаг: ожидается дальнейшее развитие библиотеки и её адаптация под сразу несколько языков, включая корректное отображение текстов на корейском и арабском с помощью AI.