Die Anpassung von Webseiten für den Zuschauer kann das Umschreiben von HTML erfordern, das aus einer anderen Quelle abgerufen wurde. Das kann der Fall sein, wenn eine Anforderung an einen Service gestellt wird, der einem anderen Team gehört, und wofür Teile der Antwort selektiv geändert werden müssen. Oder wenn die statischen Teile der Seite auf der Edge und damit näher am Nutzer gecacht werden sollen und die individuelle Anpassung an einem physischen Standort erfolgen soll, um die Latenz der Anforderung zu minimieren. Das Fastly Compute JavaScript SDK ist jetzt mit einem Streaming HTML Rewriter ausgestattet, der diese Ziele mit einer ergonomischen API erreichen kann, die sich in bestehende Webstandards einfügt und herkömmliche serverseitige DOM-Manipulationslösungen übertrifft.
Der HTML Rewriter ist in Version 3.35.0 des JS SDK verfügbar. Die entsprechende Dokumentation finden Sie in den Dokumenten zu @fastly/js-compute.
So funktioniert die HtmlRewritingStream API
Das JS SDK bietet einen HTMLRewritingStream-Typ, mit dem Sie das Umschreiben von Callbacks auf CSS-Selektoren registrieren können. Wenn der Rewriter auf ein Element trifft, das mit dem Selektor übereinstimmt, ruft er den registrierten Callback auf. Dieser Callback kann die Attribute des Elements manipulieren und Inhalte aus dem unmittelbaren Kontext hinzufügen oder entfernen. Nachdem Sie eine Instanz dieses Typs erstellt haben, können Sie einen HTML Stream durch ihn leiten. Wenn wir beispielsweise vor alle h1-Tags den Text „Header: “ setzen und div-Tags ein Attribut hinzufügen möchten, könnten wir Folgendes schreiben:
/// <reference types="@fastly/js-compute" />
import { HTMLRewritingStream } from 'fastly/html-rewriter';
async function handleRequest(event) {
let transformer = new HTMLRewritingStream()
.onElement("h1", e => e.prepend("Header: "))
.onElement("div", e => e.setAttribute("special-attribute", "top-secret"));
let body = (await fetch("https://example.com/")).body.pipeThrough(transformer);
return new Response(body, {
status: 200,
headers: new Headers({
"content-type": "text/html"
})
})
}
addEventListener("fetch", (event) => event.respondWith(handleRequest(event)));Sie konstruieren den HTMLRewritingStream mit zwei Callbacks: einen für H1-Tags und einen für divs. Sie stellen eine HTTP-Anfrage, um eine HTML-Seite abzurufen, und leiten die Antwort durch den Rewriting Transformer. Schließlich geben Sie eine Antwort zurück, die den umgeschriebenen Text enthält.
HTMLRewritingStream ist eine Art von TransformStream – ein Teil des Streams-API-Webstandards. Dies hat zwei wesentliche Vorteile. Erstens wird HTML in einem Streaming-Verfahren verarbeitet, bei dem das Dokument in Fragmenten empfangen, verarbeitet und an den Client gesendet wird, anstatt auf die Übertragung und Transformation des gesamten Dokuments warten zu müssen. Zweitens passt der Rewriter in bestehende Pipelines, die auf TransformStream basieren. Wenn Sie also individuelle Streaming-Transformationen haben, die Sie vor oder nach dem HTML Rewrite durchführen möchten, verketten Sie einfach einen weiteren PipeThrough-Aufruf, etwa so:
body.pipeThrough(aCustomTransformer)
.pipeThrough(htmlRewriter)
.pipeThrough(anotherCustomTransformer);Die API orientiert sich an der html-rewriter-Schnittstelle von Akamai. Allein die Option insert_implicit_close wird nicht unterstützt. Dafür kann mithilfe der hinzugefügten Option escapeHTML HTML als Text in umgeschriebene Elemente eingefügt werden. Die Implementierung nutzt das lol-html Rust Crate von Cloudflare, um Parsing und Umschreiben in Echtzeit zu ermöglichen.
Performance Benchmarks: Fastly HTMLRewritingStream vs. LinkeDOM
Dank der zugrundeliegenden streamingbasierten Infrastruktur für latenzarmes Parsen und Umschreiben übertrifft HTMLRewritingStream reine JS-Bibliotheken wie LinkeDOM deutlich. Die folgende Grafik zeigt die Verarbeitungszeit in Millisekunden für das Überschreiben einer Anzahl von Bild-Tags sowie der entsprechenden Beschriftungen und Beschreibungen:
Beachten Sie die logarithmische Darstellung: Sie zeigt, dass die Verarbeitungszeit für HTMLRewritingStream etwa 20-mal schneller ist als die von LinkedDOM. Die Messungen wurden mit einer lokalen Ausführung auf einem M3 MacBook Pro durchgeführt und über 20 Durchläufe gemittelt.
Den Unterschied können Sie in dieser kleinen Demo in Aktion erleben, bei der Bilder umgeschrieben und mit einem Foto von Nicholas Cage ersetzt werden. (Die Auswahl höherer Bildzahlen kann dabei für die LinkeDOM-Implementierung zu CPU-Timeouts führen).
Fazit: High-Performance HTML Rewriting auf der Edge mit Fastly Compute
Die HTML-Rewriter-Funktion des Fastly JavaScript SDK ist jetzt in Version 3.35.0 verfügbar. Sie bietet Ihnen eine ergonomische, leistungsstarke Methode zum Umschreiben von HTML, die in bestehende Webstandards passt. Probieren Sie sie aus und sagen Sie uns, wie sie Ihre Compute Workloads unterstützt.