Pretext.JS

Pretext.js: Революция в измерении текста без обращения к DOM

В современном веб-разработке производительность интерфейса напрямую зависит от того, насколько эффективно браузер обрабатывает изменения макета. Pretext.js — это специализированная библиотека на чистом JavaScript, которая предлагает кардинально новый подход к работе с текстом. В то время как стандартные методы полагаются на дорогостоящие операции браузерного движка, Pretext.js измеряет и позиционирует многострочный текст исключительно с помощью арифметических вычислений.

Использование Pretext.js позволяет разработчикам забыть о проблемах «layout thrashing» и принудительного синхронного рефлоу. Движок работает мгновенно при первом вызове и еще быстрее при последующих за счет интеллектуального кэширования.

What's Pretext.js (Что такое Pretext.js)

Pretext.js — это легковесный, TypeScript-first движок для верстки текста, который не касается DOM. Традиционный процесс рендеринга текста в браузере, разработанный десятилетия назад, требует от движка постоянного обращения к внутреннему дереву макета (layout tree). Каждый раз, когда вызывается getBoundingClientRect(), браузер вынужден приостанавливать выполнение скриптов и выполнять полную перерисовку, чтобы вычислить размеры элементов.

Pretext.js обходит эти барьеры. Он измеряет каждое слово один раз с помощью Canvas API, кэширует ширину глифов и в дальнейшем использует чистую математику для расчета переносов строк и высоты контейнера. Это делает Pretext.js незаменимым инструментом для высоконагруженных интерфейсов.

Features (Особенности Pretext.js)

Библиотека обладает набором уникальных характеристик, ориентированных на производительность:

• Zero DOM reads (Ноль чтений из DOM): После этапа подготовки (prepare), каждый вызов layout() — это чистая арифметика. Никаких offsetHeight или scrollHeight.
• Реальные метрики шрифтов: В отличие от эвристических методов, Pretext.js использует measureText() из Canvas, получая точные данные о ширине глифов, которые соответствуют реальному рендерингу в браузере.
• Многоязычность по умолчанию: Поддержка более 12 систем письма, включая CJK (китайский, японский, корейский), арабский, иврит, тайский и хинди, с учетом правил сегментации Unicode и двунаправленного текста.
• TypeScript-native: Написан на TypeScript с нуля, обеспечивая точную типизацию без необходимости установки дополнительных пакетов @types.
• Отсутствие зависимостей: Pretext.js — это автономная библиотека, которая не увеличивает размер вашего бандла лишним кодом и использует только стандартные браузерные API.
• Многократное использование подготовленных данных: Один вызов prepare() позволяет мгновенно вычислять высоту текста для разных ширин экрана (мобильные устройства, планшеты, десктопы).

How to Use (Как использовать Pretext.js)

Начать работу с Pretext.js можно всего за три шага. Процесс интеграции прост и эффективен:

1. Установка

Выберите ваш пакетный менеджер для установки @chenglou/pretext:

npm install @chenglou/pretext
# или
pnpm add @chenglou/pretext
# или
bun add @chenglou/pretext

2. Подготовка текста

Используйте функцию prepare() для сегментации текста и измерения ширины сегментов. Это выполняется один раз для пары «текст + шрифт».

import { prepare, layout } from '@chenglou/pretext';

const handle = prepare(
  'Привет, Pretext.js — рефлоу больше не нужен.',
  '16px "Inter"'
);

3. Расчет макета

Функция layout() выполняет мгновенный расчет высоты и количества строк на основе переданной ширины контейнера.

const { height, lineCount } = layout(
  handle,
  400,  // ширина контейнера в пикселях
  24    // межстрочный интервал (line-height) в пикселях
);

console.log(height);    // Выведет расчетную высоту
console.log(lineCount); // Выведет количество строк

Use Case (Варианты использования)

Pretext.js особенно эффективен в сценариях, где традиционные измерения в DOM становятся узким местом:

• Виртуальная прокрутка (Virtual Scroll): При рендеринге списков из 10,000+ элементов с переменной высотой текста, Pretext.js обеспечивает стабильные 60fps, так как расчет высоты всех элементов занимает доли миллисекунд без обращения к DOM.
• Интерфейсы ИИ-чатов: Предварительный расчет высоты пузырей сообщений для стриминговых ответов ИИ. Это позволяет избежать неприятных «скачков» контента при рендеринге.
• Международные фиды данных: Точное измерение текстов на разных языках (арабский, корейский, латиница) в едином виртуализированном потоке.
• Сложная типографика: Обтекание текстом динамических объектов (например, 3D-моделей или интерактивных сфер) в реальном времени, что невозможно реализовать стандартными средствами CSS Shapes без потери производительности.

FAQ

Почему Pretext.js быстрее стандартного подхода? Традиционный метод заставляет браузер выполнять полный цикл рендеринга (Style -> Layout -> Paint) при каждом измерении. Pretext.js заменяет этот цикл простой математической операцией сложения ширин кэшированных сегментов.

Поддерживает ли Pretext.js сложные шрифты? Да, так как библиотека использует системный Canvas движок браузера, она учитывает все особенности начертания и метрики конкретного шрифта.

Нужно ли мне пересчитывать текст при изменении размера окна? Нет, вам не нужно заново вызывать prepare(). Один и тот же дескриптор (handle) можно использовать в функции layout() с любыми новыми значениями ширины контейнера.

Сколько времени занимает расчет для большого количества блоков? Тесты показывают, что Pretext.js способен рассчитать макет для 1000 блоков текста примерно за 0.05 мс, в то время как DOM-метод может занять около 94 мс и привести к потере кадров.