Wie schaue ich unter die Abdeckungen und sehe, wie HTML gerendert wird?

Question

Zum Beispiel:

<input name="abutton" type="button" value="This is not a button" /> 

Ich weiß, das mir einen Knopf gibt. Aber ich weiß auch, dass jemand herausfinden musste, wie breit mein Text war, zeichne einen Button der richtigen Größe, platziere meinen Text dort ... etc.

Lassen Sie uns Mozilla als Beispiel verwenden. Ich habe etwas gegoogelt und this gefunden, also denke ich, dass ich auf dem richtigen Weg bin. Dennoch sagt der erste Satz allem:

Seite Reorganisation: Der in Mozilla verwendeten Layout-Engine (die von vielen Namen bekannt) begann als ein Projekt auf eine neue Layout-Engine für Mozilla zu schreiben und wurde Layout-Engine von Mozilla und die Grundlage für eine nahezu komplette Neufassung Ende 1998.

Verwirrend.

Hier ist eine Liste von Teilen, ich weiß, gibt es (aus dieser Mozilla-Seite):

• HTML-Parser und XML-Parser
• DOM-Implementierung
• CSS-Parser und Stil-System
• HTML-Parser und XML-Parser
• Code für CSS-basiertes und HTML-basiertes Layout und Rendering

Kann jemand in Laiensprache erklären, wie das Mozilla Browser-Modell eine Schaltfläche anzeigt?

Answer 1

Also das ist eigentlich eine wirklich, wirklich komplizierte Frage. Ich arbeitete auf dem Mozilla-Projekt vor ein paar Jahren hier, wie dies zu den besten meiner Erinnerung funktioniert:

1. HTML wird analysiert und in Knoten wie die in der DOM-Standard spezifiziert. Dieser Baum repräsentiert die Struktur der Daten im Dokument.
2. Aus diesem DOM-Baum wird ein anderer, paralleler Baum, genannt der Rahmenbaum, konstruiert. Dieser Baum repräsentiert die visuelle Information im Baum - Dinge wie das Box-Modell sind hier implementiert.
3. Sobald Mozilla alle Interdependenzen ausgearbeitet hat und einen zufriedenstellenden Frame-Baum erstellt hat, ist der Frame-Baum gequält. Es gibt einige Schritte hier (Ansichtsbaum, Widgetbaum), von denen ich glaube, dass sie jetzt veraltet sind und trotzdem eher Mozilla-spezifisch sind. Der Punkt ist, dass dieser Rahmenbaum dann an das Graphik-Subsystem übergeben wird (das schließlich an das OS ruft), um gerendert zu werden.

Die meisten modernen Browser-Layout („Reflow“ in Mozilla Begriffe) Seiten inkrementell, so all dies ist eine Art auf einmal geschieht, wie verschiedene Ressourcen in geladen werden, so dass nicht völlig korrekt ist.

Für Mozilla Informationen würde ich #developers auf irc.mozilla.org empfehlen. Für WebKit-Informationen können Sie #webkit auf chat.freenode.net ausprobieren.

Beachten Sie, dass ich nicht mehr ein Mozilla-Entwickler bin und seit 2008 keine Verbindung mit dem Projekt hatte, also ist es durchaus möglich, dass ich falsch liege. Fühl mich frei, mich zu korrigieren.