20 Millionen Menschen haben zugeschaut. Ein berühmter React-Experte hat ein sensationelles Open-Source-Projekt veröffentlicht, das die Frontend-Entwicklung revolutioniert. Seine Geschwindigkeit ist um das 500-fache schneller, und es hat beeindruckend 28.000 Sterne auf GitHub gesammelt.
Nachrichten von Zhidongxi vom 1. April. Am vergangenen Wochenende hat das Open-Source-Projekt Pretext eines der führenden Frontend-Experten GitHub schnell in Brand gesteckt. Bis heute ist die Anzahl der Sterne auf 28.200 gestiegen, und die Anzahl der Ansichten des offiziellen Tweets des Entwicklers hat 21 Millionen überschritten, was es zum Fokus der globalen Entwicklergemeinschaft gemacht hat.
Pretext wurde von Cheng Lou, einem Frontend-Engineer von Midjourney und Mitglied des Kernteams der Open-Source-JavaScript-Bibliothek React, sensationell als Open-Source-Projekt veröffentlicht. Es ist eine reine TypeScript-Bibliothek mit einer Größe von nur einigen Kilobyte, und die Frontend-UI-Rendergeschwindigkeit ist etwa 500 Mal schneller als bei herkömmlichen Tools. Cheng Lou hat angegeben, dass die Implementierung von Pretext dadurch erreicht wurde, dass Claude Code und Codex die echten Benchmarks des Browsers gezeigt wurden und diese bei jeder wichtigen Containerbreite gemessen und iteriert haben, was über mehrere Wochen hinweg lief.
Cheng Lou hat auf der sozialen Plattform X Pretext mit sehr hoher Bewertung versehen: "Eines der wichtigsten Basisbausteine im Bereich der UI-Engineering in den nächsten Jahren."
Pretext unterstützt alle Sprachen, die ein Entwickler sich vorstellen kann, und ist mit den verschiedenen Browser-Eigenschaften kompatibel. Allerdings hat er auch erwähnt, dass der Vergleich, dass Pretext etwa 500 Mal schneller ist als herkömmliche Methoden, möglicherweise unfair ist.
Seine starke Flexibilität hat die Kreativität der Entwickler noch mehr angeregt. Derzeit hat sich auf der sozialen Plattform X eine Pretext-Anwendungswelle entwickelt, wie z. B. die Verwendung von Pretext für Spiele, Musikvideos, das Erstellen von Textumlauf- und Flusseffekten.
Bei dem klassischen, oft modifizierten Schwarz-Weiß-Video des bekannten Songs "Bad Apple!!" haben die Entwickler es geschafft, dass die Liedtexte durch Verschiebungs- und Deformationseffekte die Umrisse von Personen und Burgen bilden und sich sanft mit der Musikmelodie ändern.
Hinter der Beliebtheit von Pretext liegt die Tatsache, dass es sich von den herkömmlichen Frontend-Layoutlösungen abhebt und eines der zeitaufwändigsten und schwierigsten Vorgänge bei der Frontend-UI-Renderung, das DOM, vermeidet. Dieses Problem hat die globalen Frontend-Entwickler seit langem geplagt und ist insbesondere bei großen Frontend-Projekten und Hochlast-Szenarien ein Engpass.
Das neue Verfahren verwendet eine selbst entwickelte Textmesslogik und nutzt die eigene Schriftart-Engine des Browsers als echten Benchmark. Dadurch wird nicht nur die Genauigkeit des Layouts gewährleistet, sondern auch die Renderleistung auf ein neues Niveau gehoben. Wichtig ist auch, dass diese innovative Architektur von Natur aus für die AI-Iteration und -Optimierung geeignet ist, was möglicherweise großen Raum für die zukünftige intelligente und automatische Entwicklung des Frontend-Layouts lässt.
Interessanterweise hat Cheng Lou auch selbst angegeben, dass "Vibe Coding" nicht genug ist und dass es richtig ist, während man auf die Ergebnisse wartet, Hula-Hoop zu drehen. Er hat angegeben, dass er seit der Arbeit an Pretext in diesem Monat fast 2 Pfund abgenommen hat.
01. Auf einer Seite können Hunderttausende von Textfeldern platziert werden, und das Scrollen ist reibungslos und ohne Verzögerungen
In den herkömmlichen Lösungen der UI-Designs muss aufgrund der komplexen und variablen Texte auf das DOM zugegriffen werden, um die Größe zu messen. Dies erfordert, dass der Browser die gesamte Seitenlayout neu berechnet, was zu Verzögerungen, Unvorhersehbarkeit und schlechter Leistung der Seite führt. Daher ist es sehr schwierig, ein Hochleistungs-Dynamisches Layout zu erstellen.
Aber in einer Zeit, in der die Echtzeit-AI-Generierung von UI, die Raumrechnung und die 3D-Oberflächen schnell voranschreiten, kann diese langsame und unkontrollierbare Textlayout-Methode den Anforderungen einfach nicht folgen.
Die Entstehung von Pretext soll genau dieses Problem lösen. Es kann auf der eigenen Schriftart-Engine des Browsers als echten Benchmark basieren und ist im Vergleich zu herkömmlichen Lösungen schneller und die Leistung ist besser kontrollierbar.
Cheng Lou hat auf der sozialen Plattform X einige typische praktische Beispiele gegeben:
Mit Pretext können auf einer Seite gleichzeitig Hunderttausende von Textfeldern platziert werden, und das Scrollen ist reibungslos und ohne Verzögerungen.
Es führt eine "Occlusion Virtualization" für Hunderttausende von Textfeldern mit unterschiedlicher Höhe durch. Ohne die DOM-Größenmessung muss nur eine einmalige, cachefreie, lineare Durchlaufberechnung der Höhe durchgeführt werden, um die Sichtbarkeit zu bestimmen, und es kann ein reibungsloses Scrollen mit 120 fps und eine Fenstervergrößerung/Verkleinerung erreicht werden.
Die Chat-Bubbles auf der Seite passen sich automatisch dem Inhalt an. Man kann sehen, dass die Breite der Chat-Boxen beim Scrollen eng an den Textinhalt angepasst ist und nicht die gesamte Zeile der Seite ausfüllt.
Beim Durchsuchen mehrerer Seiten kann es ein reaktives dynamisches Mehrspalten-Magazinlayout realisieren, ähnlich wie in einem Magazin, und gleichzeitig eine Anpassung an den Bildschirm und eine dynamische Änderung des Inhalts erreichen.
Pretext kann auch schnell ASCII-Zeichenbilder mit variabler Schriftbreite erstellen, das heißt, Zeichenbilder, die nur aus lateinischen Buchstaben, Zahlen, Satzzeichen und wenigen Symbolen bestehen, um Muster, Gesichter, Landschaften, Logos usw. zu bilden.
Die üblichen automatisch höhenverstellbaren Eingabefelder, Klapppanels, mehrzeilige Textzentrierung, reines Canvas-mehrzeilige Texte sowie andere Probleme, die in der Vergangenheit bei der Webseite-Layout und -Styling in CSS sehr schwierig zu lösen waren, sind heute so einfach, dass sie kaum erwähnenswert sind.
Einige Entwickler haben den Vergleich zwischen der Verwendung von Pretext und DOM für die sofortige Seitenaufteilung eines gesamten Romans durchgeführt. Dabei wurde gefordert, dass jede Seite eine Vorschau haben muss. Pretext benötigt nur 2 - 3 Millisekunden pro Ausführung, während DOM mehr als 100 Millisekunden benötigt.
02. Auf X wird die Frontend-Leistung gezeigt, und Entwickler erstellen Spiele, Musikvideos und 3D-Effekte mit Texten
Die Entwickler haben direkt auf X eine Frontend-Show der Technik gegeben.
Einige Entwickler haben direkt mit Pretext ein Musikvideo erstellt, bei dem die Liedtexte sich mit der Melodie verformen.
Im Folgenden ist das DJ-Konzert des britischen Top-Produzenten Fred again und Thomas Bangalter, einem Kernmitglied von Daft Punk, gezeigt, bei dem die Rhythmen mit Texten dargestellt werden.
Einige Entwickler erstellen Spiele mit Pretext.
Beispielsweise ist im Folgenden die ASCII-Zeichenversion des 3D-Maulwurf-Shooter-Spiels "Doom" gezeigt.
Es gibt auch ein Text-Spielchen "Brechen Sie die Kacheln", bei dem alle großen und kleinen Texte auf der Seite sich sanft verformen, wenn die Kacheln springen.
Texte können auch visuelle Effekte ähnlich wie Wasserwellen oder Schallwellenausbreitung simulieren.
Einige Nutzer haben auch angegeben, dass die praktischste Anwendung von Pretext die Erstellung von Lebensläufen ist. Unabhängig davon, wie viel Inhalt Sie eingeben, wird es automatisch das Layout, die Schriftgröße und den Abstand anpassen und immer nur eine Seite einnehmen, ohne auf die zweite Seite zu überschreiten.
03. "Nur eine Architekturänderung kann die maximale Leistungssteigerung erzielen", Pretext hat zwei Anwendungsfälle
Beim Messen der Größe und Position von Texten auf herkömmlichen Webseiten muss häufig auf das DOM zugegriffen werden, was sehr langsam und verlangsamt die Seite. Gleichzeitig müssen diese Größenmessungen in Batches durchgeführt werden, was das programmiertechnische Modell der unabhängigen Grenzen der UI-Komponenten zerstört.
Das Pretext-Verfahren misst nicht über das DOM. Es legt zuerst das Textlayout fest und liest dann grob die Größeninformationen über getBoundingClientRect. Cheng Lou ist der Meinung, dass die maximale Leistungssteigerung immer von einer Architekturänderung kommt.
Die Homepage des Open-Source-Projekts erwähnt, dass Pretext zwei Anwendungsfälle hat:
Zuerst ist es möglich, die Höhe eines Textes zu messen, ohne überhaupt auf das DOM zuzugreifen.
prepare() ist für die einmalige Ausführung zuständig: Normalisierung von Leerzeichen, Textsegmentierung, Anwendung von Ligaturregeln und Messung der Größe jedes Textsegments über das Canvas. Am Ende wird ein undurchsichtiger Handler zurückgegeben. layout() ist der nachfolgende Pfad mit sehr niedrigen Kosten: Nur eine reine numerische Berechnung basierend auf der zwischengespeicherten Breite. Vermeiden Sie es, prepare() für denselben Text und dieselbe Konfiguration mehrfach aufzurufen, da sonst der Sinn der Vorberechnungen verloren geht. Beispielsweise muss nur layout() erneut ausgeführt werden, wenn sich die Fenstergröße ändert.
Zweitens kann man manuell die Zeilenumbrüche eines Absatzes gestalten.
Ersetzen Sie prepare durch prepareWithSegments und führen Sie dann die folgenden Schritte aus:
