2015-08-01 7 views
6

Ich würde gerne über den "Dom Baum" und "Render-Baum" Unterschied wissen?Was ist der Unterschied zwischen Browser-DOM-Baum und Render-Baum

Ist der Renderbaum aus dem "dom tree" erstellt oder ist es ein anderer Baum, der vom Browser erstellt wurde?

+0

Dies ist eine sehr breite Frage. Hast du es gegoogelt? –

+1

@EdHeal Diese Stapelüberlauffrage steht ganz oben in den Google-Suchergebnissen für "render tree". – ChrisW

Antwort

1

Große Frage. Der DOM-Baum ist im Wesentlichen der Baum, der alle Ihre HTML-Elemente (Knoten) enthält, während der Renderbaum ein Höhepunkt der DOM- und CSSOM-Bäume ist. Der Renderbaum ist der, der tatsächlich auf der Seite gerendert wird. Hoffe das hilft! Ich habe einen Artikel darüber geschrieben, check it out :)

http://www.jjburton.com/2016/02/12/web-science-browser-internals-rendering.html

The big question...'How does the browser render a web page?'. Before starting, let's quickly answer some sub-questions:

0

Dies sind einige sehr gute Artikel, ich glaube, Sie zuerst lesen sollten!

  1. Was jeder Frontend-Entwickler über Webseite

    Rendering wissen sollte http://frontendbabel.info/articles/webpage-rendering-101/

  2. Wie Browser: Hinter den Kulissen der modernen Web-Browser

    http://taligarsiel.com/Projects/howbrowserswork1.htm

  3. Render-Baum-Konstruktion, Layout und um Hilfe für Sie

    https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction

Hoffnung Paint!

+0

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction – xgqfrms

+0

Die CSSOM- und DOM-Bäume werden zu einem ** Renderbaum ** kombiniert, der dann verwendet wird berechnet das Layout jedes sichtbaren Elements und dient als Eingabe für den Malprozess, der die Pixel auf dem Bildschirm rendert.Die Optimierung dieser Schritte ist entscheidend für das Erreichen einer optimalen Renderleistung. – xgqfrms

0

Der Renderbaum wird erstellt, indem der DOM-Baum (Hergestellt aus dem HTML-Parsing) und CSSOM (Hergestellt aus dem für das Dokument definierten CSS-Baum) kombiniert werden.

Der Renderbaum enthält nur die Knoten, die auf dem Bildschirm sichtbar sind, d. H. Wenn die Anzeige für einen der Knoten als none markiert ist, dann ist dies nicht der Teil des Renderbaums.

Die Rendering-Struktur wird dann in die Layout-Phase und schließlich in die Malphase übergeben, in der die tatsächlichen Pixel auf dem Bildschirm dargestellt werden und der Inhalt für Sie sichtbar ist.

Um Ihre Frage zu beantworten: Sowohl dom tree und render tree wird nur vom Browser erstellt und yes render tree wird aus dem dom tree wie oben erklärt.

Verwandte Themen