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
1
Pretext-Bibliothek installieren
Installiere Pretext über npm oder yarn in dein Projekt
npm install pretextTipp: Stelle sicher, dass du TypeScript in deinem Projekt konfiguriert hast
Warnung: Pretext benötigt Zugriff auf die Canvas API
2
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
3
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
4
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) nutzenTipp: Dies reduziert Layout-Reflows um 99% bei großen Listen
Warnung: Caching invalidieren, wenn Font oder Container-Breite ändert sich