Although I now understand how browsers and http works, I have very little idea how a web page is rendered when it gets served up from the server, or what the term DOM actually means.
So I’ve done some research on this today and will share my findings. I’ll keep it brief, and in layman’s terms.
The DOM tree describes the structure of all objects (nodes) of the html page, starting from the document itself (the root), down to text nodes (the leafs). There is a hierarchical relationship of parents, children and siblings between all the nodes on the page. This is why when you an HTML page viewed in an HTML-editor is formatted with the parent nodes on the outside, and everything inside indented, relative to the other nodes.
Putting this all together then, this is how a webpage is rendered:
- After the request has been made to a server, the server compiles the information it needs to send back, usually as HTML.
- When the browser receives this response, it parses the HTML (using a layout engine), and puts it into a DOM(Domain Object Model) tree.
- Stylesheets are parsed and the rendering information attached to the specific node in the DOM tree.
- Then Javascipt is parsed and executed, and DOM nodes are moved and styled accordingly.
- The browser renders the page on the screen from the DOM tree and the style information for each node.