Don't know how modern browsers render websites? Then this might be the perfect place to learn some basics about it.
Browser is made up of different components like UI, Browser Engine, Networks, Timers, and Data(storage area). Among this, the Browser engine is divided into two parts:
Rendering Engine
JavaScript Engine.
The reading and displaying part of the webpage is mainly done by Rendering Engine which is written in C++. This is why it is also said that HTML is a parser on top of C++ and C++ is responsible for rendering elements.
Now let's talk more about the actual inner workings of the rendering engine which is responsible for rendering HTML and CSS.
Here is the step-by-step explanation:
1. The browser loads a file known as the document from the Network(server) which are raw bytes in the form (0 and 1).
2. The rendering engine converts raw bytes into a sequence of characters, basically it encodes characters from the document(HTML file).
Now, tokenization of characters takes place where tokens are generated out of characters. It picks out all the words(HTML tags) like h1, p, body, img and so on which are stored in separate memory for further usage.
NOTE: Tokenization is based on UTF information given in HTML documents.
4. After tokenization big objects are created out of these tokens(HTML tags). Tokens have the information about each HTML tag. A token can have information like tag name- h1, data- Nepal.
- For every token, similar kinds of information mentioned above are stored in the form of objects.
5. All these objects are in unstructured format means they must be stored in structured format(arrange them into proper relation with every other object).A relation like which object can be the parent of another which can be a child and so on. This conversion process of unstructured objects into structured objects is known as a model.
Now we know the relation between each object. All these things are converted into NodeList by the rendering engine. All these processes from step 1 to now are known as DOM generation.
For CSS as well all the processes are almost the same but the process is known as CSSOM generation.
8. DOM and CSSOM are now stored in memory.
Information about DOM and CSSOM is given to the browser engine. The browser engine performs some calculations for CSSOM to figure out pixels and so on (CSS properties/dimensions).
10. After this calculation rendering tree gets ready.
11. Now the painting starts(rendering of web page).
After the end of the painting, the browser serves us with a beautiful website.
But whenever the browser finds script(JS) code, It will stop the execution of DOM because JS can modify DOM directly so there's no point in executing DOM.
This will slow down the performance of the website.
To improve this we need to execute JS at the end after DOM is ready.
There is something called 'deferring JavaScript' through which one can execute JS only after the DOM is ready.
Also, JS code will be on hold if the browser finds out CSS and it will start executing CSSOM.
This is how the rendering of websites is done by browsers.