Pretextintermediatecoding95% Usefulness

Pretext-Bibliothek für Text-Messung verwenden

Nutze die Pretext-Bibliothek, um Textdimensionen (Höhe, Breite, Zeilenumbrüche) zu berechnen, ohne Layout-Reflows auszulösen. Dies ist essentiell für performante Text-Heavy UIs wie virtualisierte Listen oder Masonry-Layouts.

Originalvideo ansehen: He just crawled through hell to fix the browser…

4 Schritte

Pretext-Bibliothek installieren

Installiere Pretext über npm oder yarn in dein Projekt

npm install pretext

Tipp: Stelle sicher, dass du TypeScript in deinem Projekt konfiguriert hast

Warnung: Pretext benötigt Zugriff auf die Canvas API

Text mit prepare() vorbereiten

Rufe die prepare()-Funktion auf, um Text in Segmente zu unterteilen und die Pixel-Breite jedes Segments zu cachen

import { prepare } from 'pretext';

const text = 'Dein langer Text hier';
const segments = prepare(text, { font: '16px Arial' });

Tipp: Caching von Segmenten verhindert wiederholte Berechnungen

Warnung: Font-Parameter müssen genau mit der CSS-Font deines UI übereinstimmen

Layout-Informationen mit layout() abrufen

Nutze die layout()-Funktion in einer Schleife, um für jede Zeile die genaue Zeichenposition zu bestimmen, ohne den DOM zu berühren

import { layout } from 'pretext';

const containerWidth = 300;
const layoutInfo = layout(segments, { width: containerWidth });
console.log(layoutInfo.height, layoutInfo.lineCount);

Tipp: Nutze die Höhen-Information für virtualisierte Listen statt Reflows zu triggern

Warnung: layout() muss mit der exakten Container-Breite aufgerufen werden

Für virtualisierte Listen anwenden

Verwende Pretext-Messungen, um zu berechnen, welche Nachrichten in einer 10.000er-Liste sichtbar sind, ohne jede zu rendern

// Vor: Alle 10.000 Nachrichten rendern und messen = Reflows
// Nach:
const messageHeights = messages.map(msg => {
  const segs = prepare(msg.text, { font: '14px Arial' });
  return layout(segs, { width: 400 }).height;
});
// Jetzt kannst du calculateVisibleRange(messageHeights, scrollPosition) nutzen

Tipp: Dies reduziert Layout-Reflows um 99% bei großen Listen

Warnung: Caching invalidieren, wenn Font oder Container-Breite ändert sich

← Alle Playbooks anzeigen