In unserer Arbeit ist es gut, die Werkzeuge, die wir verwenden, besser zu verstehen, um sie besser zu nutzen und das Beste aus ihnen herauszuholen. Hier ist der erste Artikel einer kommenden Serie, die sich heute auf ein grundlegendes Tool konzentriert, das wir täglich verwenden, ohne unbedingt darüber nachzudenken: die HTML-Rendering-Engine.
[Trennzeichen type=““ size=““ icon=“star“]„Als Webentwickler hilft Ihnen das Erlernen der inneren Funktionsweise eines Browsers, bessere Entscheidungen zu treffen und die Gründe für gute Entwicklungspraktiken zu verstehen.“
–Paul Irish, Chrome Developer Relations
Was ist eine HTML-Rendering-Engine?
Wie Sie wahrscheinlich bereits wissen, ist die HTML-Rendering-Engine eine Unterroutine, eine Reihe von Softwarebibliotheken, die Browser verwenden, um Webseiten anzuzeigen. Es ist für jeden Browser spezifisch. Das heißt, dass die HTML-Rendering-Engine aus dem Code, den Sie als Entwickler schreiben, ein visuelles Bild erstellt, das der Benutzer auf seinem Bildschirm sehen und mit dem er interagieren kann.
Es gibt einige (Liste auf Wikipedia).
Aufgrund dieser Rendering-Engines hat jeder Browser seine eigene Interpretation von HTML, JavaScript und CSS. Auch das bereitet uns in den Integrationsphasen regelmäßig Sorgen.
Die Rendering-Engine ist ein bisschen wie der Grundpfeiler des Browsers oder sein Herz, wie Sie es bevorzugen. Seine Verantwortung ist sehr wichtig. Die wunschgemäße Darstellung von Inhalten auf dem Bildschirm ist unser oberstes Ziel.
[separator type=““ size=““ icon=“star“] Für diesen Artikel habe ich mich entschieden, mich auf HTML-Renderer zu konzentrieren, bedenke aber dennoch, dass es andere Arten von Renderern gibt . Es ist kein Werkzeug, das nur für die Verwaltung von HTML-Dokumenten spezifisch ist.
Eine Rendering-Engine ist eine Software, die ein Bild aus digitalen Daten neu erstellt. Der Begriff ist allgemein und bezieht sich auf mehrere Arten von Programmen, die mehr oder weniger einfache Aufgaben oder Berechnungen ausführen.
Eine Rendering-Engine kann beispielsweise dafür verantwortlich sein, aus Informationen über die zu zeichnenden Objekte, die Textur ihrer Oberfläche und die zu berücksichtigenden Lichtquellen ein 3D-Bild zu konstruieren.
Je nach Fall ist jede HTML-Rendering-Engine mehr oder weniger auf dem neuesten Stand der W3C-Standards…. Oder mehr oder weniger buggy. Beispielsweise ist das Rendering von CSS3-Animationen zwischen Firefox (der unter Gecko läuft) und Chrome (der unter Blink/Webkit läuft) nicht gleich: Das Ergebnis ist bei Chrome deutlich flüssiger, während wir bei Firefox ein eher ruckeliges Rendering erhalten.
Standardmäßig kann die Rendering-Engine HTML-, XML-Dokumente und Bilder anzeigen. Es kann andere Typen mit einem Plug-in (oder einer Browsererweiterung) anzeigen. Beispielsweise wird ein PDF-Dokument mit einem PDF-Viewer-Plug-In angezeigt, das Sie in Ihrem Browser installieren (z. B. Adobe Reader), Flash-Elemente werden mit dem Adobe Flash Shockwave Player-Plug-In sichtbar usw.
Aber konzentrieren wir uns auf das Hauptthema: das Anzeigen von HTML und Bildern, die mit CSS formatiert sind.
[Trennzeichen type=““ size=““ icon=“star“]
Und wie funktioniert dieses Biest?
Zuerst erhält die Rendering-Engine den Inhalt des HTML-Dokuments, das der Benutzer anzeigen möchte (er hat zum Beispiel auf einen Link geklickt). Es wird in 8-KB-Blöcken geladen.
Die Rendering-Engine analysiert das HTML-Dokument und baut den Inhaltsbaum aus den im Dokument angetroffenen Knoten auf. Jeder Knoten entspricht jedem Element.
Es analysiert dann die Stildaten, die in den externen CSS-Dateien enthalten sind, aber auch diejenigen, die direkt in das HTML-Dokument eingefügt werden, die Stilelemente. Diese Informationen werden verwendet, um einen weiteren Baum zu erstellen.
Der Renderbaum enthält Rechtecke mit visuellen Attributen wie Farben und Abmessungen. Die Rechtecke sind in der richtigen Reihenfolge, um auf dem Bildschirm angezeigt zu werden.
Nach der Erstellung des Rendering-Baums erhält die Engine die genauen Koordinaten, an denen sie die Elemente auf dem Bildschirm erscheinen lassen muss. Es wird „gelesen“ und jeder Knoten wird unter Verwendung der UI-Hintergrundebenen gezeichnet.
Was Sie beachten müssen, ist, dass es sich um einen schrittweisen Prozess handelt. Der Renderer zeigt alle Inhalte so schnell wie möglich auf dem Bildschirm an. Es wird nicht darauf gewartet, dass der gesamte HTML-Code analysiert wird, bevor mit dem Erstellen der endgültigen Ansicht begonnen wird.
Sie haben dieses Phänomen sicherlich schon bemerkt, wenn Ihre Internetverbindung langsamer als gewöhnlich ist und die Webseite „kaputt“ zu sein scheint. Tatsächlich werden Webseiten nicht wie Bilder Zeile für Zeile von oben nach unten angezeigt. Der untere Teil der Seite kann durchaus zuerst angezeigt werden, wenn der obere Teil stärker belastet wird. Teile des Inhalts werden analysiert und angezeigt, während der Prozess fortgesetzt wird, während der Rest der Seite weiterhin geladen wird. Die letzten anzuzeigenden Elemente sind die schwersten Bilder.
[Trennzeichen type=““ size=““ icon=“star“]
Die wichtigsten HTML-Rendering-Engines
– Geckos
Ursprünglich „NGLayout“, ist Gecko Open Source und kostenlos, es wurde 1998 von der Mozilla Foundation ins Leben gerufen, als Netscape den Quellcode seines Webbrowsers Netscape Navigator veröffentlichte und es damit Open Source machte. Netscape gründete daraufhin die Mozilla Foundation mit dem Ziel, Navigator weiterzuentwickeln. Gecko ist dann fester Bestandteil des Netscape Navigators.
Es wurde entwickelt, um HTML, CSS, XUL und JavaScript zu lesen und zu interpretieren. Es ist in verschiedenen Anwendungen wie Firefox, Thunderbird, Netscape Navigator, AOL Explorer oder Camino zu finden. Produkte, die dieselbe Version von Gecko verwenden, unterstützen identische Standards.
Geckos Ziel ist eine portable Engine, die Webstandards und W3C-Empfehlungen respektiert. Es funktioniert auf den Betriebssystemen Windows, Linux und Mac OS X2. Es ist in der Programmiersprache C++ geschrieben und wird unter den Lizenzen MPL, GPL und LGPL3 vertrieben. (Quelle: Wikipedia)
– Dreizack
Trident ist der Name der Webseitenanzeige-Engine, die im Internet Explorer in seinen Windows-Versionen und damit allen Browsern, die auf Internet Explorer basieren, verwendet wird. Es wird oft auch als „MSHTML“ bezeichnet, was dem Namen der Dynamic Link Library der Engine entspricht. Es wird von Microsoft in C++ entwickelt
Es wurde als Softwarekomponente der COM-Schicht entwickelt, die es Entwicklern ermöglicht, ihren Anwendungen in jeder Entwicklungsumgebung, die COM unterstützt, einschließlich Visual Studio, Engine-Funktionalität hinzuzufügen. (Quelle: Wikipedia)
–Webkit
WebKit ist eine kostenlose Softwarebibliothek, die es Entwicklern ermöglicht, eine Engine zum Rendern von Webseiten einfach in ihre Software zu integrieren. Es ist unter der BSD- und GNU-LGPL-Lizenz verfügbar. Ursprünglich dem Betriebssystem Mac OS X (ab Version 10.3 Panther) vorbehalten, wurde es auf Linux und Windows portiert. Daher heißen die Ports von WebKit für die GTK+- und Qt-Umgebungen jeweils WebKitGTK+ und QtWebKit.
WebKit ist ein Fork der KHTML-Rendering-Engine des KDE-Projekts, die insbesondere im Konqueror-Browser verwendet wird. Es integriert zwei Unterbibliotheken: WebCore und JavaScriptCore, die jeweils KHTML und KJS entsprechen.
Es besteht erfolgreich den Acid2-Test und die in Entwicklung befindliche Version erreicht 100 % im Acid3-Test seit dem 27. März 2008.
Webkit integrierte eine gleichnamige JavaScript-Engine. Seitdem wurde es umgeschrieben, die neue Engine heißt jetzt SquirrelFish und ist viel schneller als die vorherige.
Im Februar 2012 veranlasste der Erfolg der Verbreitung von WebKit „die OpenWeb-Gruppe, die sich für die Standardisierung von Webentwicklungstechnologien einsetzte, einen Appell an Entwickler zu richten und auf die Folgen der Dominanz von WebKit auf mobile und Entwicklerpraktiken hinzuweisen“. Im Januar 2013 ist die dominierende Stellung von Webkit immer noch ein Problem. (Quelle: Wikipedia)
Google hat kürzlich Webkit verlassen Erstellen Sie Ihre eigene Rendering-Engine, Blinzeln.
Der Rest… Bald 🙂
Emmanuelle Guyot – UX-Wissenschaftlerin
