Pretext.JS

Pretext.js: Textmessung und Layout ohne DOM-Reflows

In der modernen Webentwicklung ist die Performance oft durch langsame DOM-Operationen begrenzt. Pretext.js löst dieses Problem radikal, indem es eine Text-Layout-Engine bereitstellt, die vollständig auf Arithmetik basiert. Anstatt den Browser mühsam über getBoundingClientRect zu befragen, berechnet Pretext.js die Maße von mehrzeiligem Text, ohne jemals das Document Object Model (DOM) lesend zu berühren. Das Ergebnis ist eine Engine, die beim ersten Aufruf schnell und bei jedem weiteren Aufruf instant reagiert.

What's Pretext.js?

Pretext.js ist eine TypeScript-native Bibliothek, die entwickelt wurde, um Textmessungen und Layout-Berechnungen von den teuren Prozessen des Browsers zu entkoppeln. Traditionell muss ein Browser bei jeder Abfrage von Box-Größen den JavaScript-Fluss stoppen, Styles berechnen und ein Reflow durchführen. Pretext.js umgeht diesen Flaschenhals.

Die Bibliothek segmentiert Text, misst Glyphen einmalig über die Canvas-API und nutzt danach rein mathematische Operationen, um Zeilenumbrüche und Höhen zu bestimmen. Dies macht Pretext.js bis zu 500-mal schneller als herkömmliche Methoden. Mit über 14.000 GitHub-Stars hat sich Pretext.js als Standard für performancekritische Textanwendungen etabliert.

Features von Pretext.js

Pretext.js bietet eine Reihe von Funktionen, die es zur ersten Wahl für Entwickler machen, die keine Kompromisse bei der Geschwindigkeit eingehen wollen:

• Zero DOM Reads: Nach der Initialisierung führt jeder layout()-Aufruf reine Arithmetik aus. Es gibt kein Layout-Thrashing und keine synchronen Reflow-Barrieren.
• Echte Font-Metriken: Durch die Nutzung der measureText()-Funktion von Canvas liefert Pretext.js exakte Werte, die dem tatsächlichen Browser-Rendering entsprechen.
• Multilingualer Support: Die Engine unterstützt über 12 Schriftsysteme, darunter CJK (Chinesisch, Japanisch, Koreanisch), Arabisch, Hebräisch, Thai und Hindi, inklusive korrekter Unicode-Segmentierung.
• TypeScript-First: Pretext.js ist von Grund auf in TypeScript geschrieben und bietet präzise Typisierungen für alle Parameter und Rückgabewerte.
• Wiederverwendbare Handles: Ein einmal vorbereiteter Text (prepare()) kann sofort für verschiedene Containerbreiten (Mobile, Tablet, Desktop) berechnet werden.
• Zero Runtime Dependencies: Die Bibliothek ist leichtgewichtig und verlässt sich ausschließlich auf Standard-Browser-APIs.

Use Case: Wo Pretext.js glänzt

Pretext.js ist besonders in Szenarien wertvoll, in denen herkömmliche DOM-Messungen zum Performance-Killer werden:

Variable-Height Virtual Scroll

Beim Rendern von Listen mit 10.000 oder mehr Einträgen müssen die Höhen der Elemente oft vorab bekannt sein. Pretext.js berechnet diese Höhen in Millisekunden ohne einen einzigen Reflow, was butterweiches Scrollen mit 60fps ermöglicht.

KI-Chat-Interfaces

In Streaming-Chat-Oberflächen können sich Textlängen ständig ändern. Mit Pretext.js lassen sich die Höhen der Chat-Bubbles im Voraus berechnen, wodurch unschöne Sprünge im Layout (Layout Shifts) vermieden werden.

Editorial Engines und kreative Visualisierungen

Da Pretext.js Text um Hindernisse fließen lassen kann (etwa durch Subtraktion blockierter Intervalle), eignet es sich für komplexe Layouts, die über die Möglichkeiten von CSS Shapes hinausgehen. Beispiele sind Textumflüsse um 3D-Objekte oder interaktive Partikelsimulationen.

How to Use: Schnellstart mit Pretext.js

Die Integration von Pretext.js in ein Projekt ist denkbar einfach und erfolgt in drei Schritten:

1. Installation

Installieren Sie das Paket über Ihren bevorzugten Package Manager:

npm install @chenglou/pretext
# oder
pnpm add @chenglou/pretext

2. Text vorbereiten

Nutzen Sie die prepare-Funktion, um den Text und die Schriftart einmalig zu analysieren:

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

const handle = prepare(
  'Hallo, Pretext.js — kein Reflow nötig.',
  '16px "Inter"'
);

3. Layout berechnen

Berechnen Sie die Höhe und Zeilenanzahl für jede beliebige Breite blitzschnell:

const { height, lineCount } = layout(
  handle,
  400,  // Container-Breite in px
  24    // Zeilenhöhe in px
);

console.log(`Höhe: ${height}px, Zeilen: ${lineCount}`);

FAQ

Warum ist Pretext.js schneller als die Standard-Browser-Messung? Standard-Methoden wie getBoundingClientRect() zwingen den Browser zu einem Reflow des gesamten Layout-Trees. Pretext.js nutzt stattdessen gecachte Canvas-Messungen und reine Mathematik (Arithmetik), was die CPU-Last drastisch reduziert.

Werden komplexe Sprachen unterstützt? Ja, Pretext.js unterstützt bidirektionalen Text (z. B. Arabisch) und komplexe Schriftsysteme wie Thai oder Hindi durch korrekte Unicode-Segmentierung.

Benötige ich spezielle Polyfills? Nein, Pretext.js setzt auf standardisierte Browser-APIs wie das Canvas-Element und funktioniert in allen modernen Browser-Umgebungen ohne zusätzliche Abhängigkeiten.

Kann ich Pretext.js mit Frameworks wie React oder Vue nutzen? Absolut. Da Pretext.js framework-agnostisch und rein in JavaScript/TypeScript geschrieben ist, lässt es sich nahtlos in jede UI-Library integrieren.