Canvas API für Textbreiten-Messung ohne Reflows
Verwende die Canvas API (canvas.measureText), um die Pixel-Breite von Text zu messen, ohne Layout-Reflows auszulösen. Dies geschieht außerhalb des DOM.
Originalvideo ansehen: He just crawled through hell to fix the browser…3 Schritte
1
Canvas-Element erstellen
Erstelle ein offscreen Canvas-Element, das nicht im DOM sichtbar sein muss
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Canvas muss nicht zum DOM hinzugefügt werdenTipp: Offscreen Canvas verursacht keine visuellen Änderungen und keine Reflows
Warnung: getContext('2d') muss verfügbar sein
2
Font konfigurieren
Stelle die Canvas-Font auf die gleiche Font wie dein UI ein
ctx.font = '14px Arial'; // Muss exakt mit CSS-Font übereinstimmen
const width = ctx.measureText('Dein Text').width;Tipp: Font-Größe und Familie müssen identisch sein, um genaue Messungen zu erhalten
Warnung: measureText() misst nur Breite, nicht Höhe
3
Textbreite ohne Reflow messen
Rufe measureText() auf beliebig viele Male auf, ohne dass dies eine Layout-Neuberechnung triggert
const words = ['Hello', 'World', 'TypeScript'];
const widths = words.map(word => ctx.measureText(word).width);
// Keine Reflows! Ultraschnell!Tipp: Speichere Canvas-Kontext, um nicht ständig neue zu erstellen