Wie macht den Browser HTML und CSS

Question

Wenn ich das folgende HTML-div-Element hat:

<div id="outer-div" style="Certain-Style"> 

<div id="inner-div"> 
</div> 
.... 
</div> 

Dann, wie der Browser implementieren/macht diese HTML-Elemente? Beginnt es mit äußerem div dann innerem div dann geh zurück, um das CSS von outer-div dann das CSS von inner-div anzuwenden?

Stellen wir uns vor, dass der Stil Certain-Style das innere div um 90 Grad im Uhrzeigersinn dreht. Die inner-div ist eine angularjs-Direktive, die andere Elemente gemäß der inner-div Breite anzeigt. Beginnt die Rotation zuerst, dann baut sie die Richtlinie auf oder beginnt sie mit dem Aufbau der Richtlinie und dreht sich dann?

Answer 1

Hier ist eine kurze Wiederholung der Schritte des Browsers:

1. Prozess HTML-Markup und den DOM-Baum bauen.
2. Verarbeiten Sie CSS-Markup und erstellen Sie den CSSOM-Baum.
3. Kombinieren Sie das DOM und CSSOM in einen Renderbaum.
4. Layout auf dem Renderbaum ausführen, um die Geometrie jedes Knotens zu berechnen.
5. Malen Sie die einzelnen Knoten auf dem Bildschirm.

---

ist meine Quelle der developers.google. Unten ist der Link für weitere Details.

Render-tree Construction, Layout, and Paint