How does a browser work?
Browsers are interfaces that allow information from the server to be displayed to our screen in HTML form. But in dept what are they, and how do they do so we visualize things, so-called websites? We will cover in a moment!
As also shown in the structure, in order to interact with internet, we need to interact with UI. We either use the browser’s UI or default web content area. Web page content area is where HTML is displayed.
Usually, when you start a new browser, you notice that a sponsored (?) search engine page has appeared. Or sometimes the browser’s own HTML UI for favorite websites, etc.
HTML & CSS Processing
The Browser Engine listens to UI actions. Manages navigation, interfaces with the network layer to fetch resources. HTML and CSS are being processed simultaneously.
HTML Parsing
Browser Engine converts bytes into plain text HTML (character sequence). This char sequence being parsed into tokens, which will then parsed into nodes. Nodes are individual entities that make the DOM tree. The picture below shows the process to create the DOM tree from raw bytes.
CSS Parsing
The process of making CSSOM out of CSS is a similar process. Raw bytes are being converted into plain CSS. Then it tokenized. Unlikely the DOM, CSSOM adds up style information to HTML tags.
Combination of DOM and CSSOM: Render Tree
Browser engine combines the DOM and the CSSOM makes up the Render Tree. The Render Tree contains information about which content will be wrapped with which element and with which style information.
On the render tree, only visible elements takes place. For example, if h1 nodes are tied with “display:none” is overridden won’t be on the render tree.
Do not confuse with opacity:0 and visibility: hidden, etc. with display:none, display:none removes tied node from Render Tree, but others are still takes place on the Render Tree.
Layout
Layout is where mathematics happening, the Browser Engine calculates position of visible elements on the web page content area.
Encountering Scripts
Tricky, but shouldn’t be forgotten. If the browser encounters scripts, it will pause constructing the DOM. JavaScript may change the CSSOM or the DOM. In order to prevent conflicts, the process pauses.
If CSSOM is not ready and encountered with JS, JS execution will wait CSSOM to be done.
- DOM halts if encounters JS.
- JS halts if CSSOM is not ready.
So positioning scripts changes loading flow of the page!
If you add up “async” attribute to a script tag, this will prevent DOM construction pause.
Hydration Case:
Some web pages are sending pre-processed HTML instead of letting browsers building it. So this allows fast loaded pages and higher SEO score. In this scenario, the page is being displayed even before JavaScript is fully loaded and executed. So as you can imagine, this bypasses many things above.
If server rendered HTML and the HTML result of client mismatches, this will cause Hydration error.
<div> {Math.random()}</div>Code above for example will reproduce the error. When on the server side, let’s say, JS randomly generated number 3, and on client side it generated number 4 will cause mismatch therefore hydration error.
Painting Pixels
As the last step of rendering, elements are being painted according to layout calculations and displays the final form of the web page.
As a Web Developer, this is fairly enough to know about browsers. Getting into very details of all structures are -in my opinion - not too necessary for now.
That’s it, I hope we covered up many things about Browsers in this article!
LinkedIn: firatmelih
GitHub: firatmelih
