browser It’s part of our everyday life, but have you ever wondered how it works under the hood?
In this article, we take a closer look at the behind-the-scenes magic of the web. browser.
let’s start! 🚀
navigation This is the first step of loading the web page.the user URLs Click or click the link.
1.1. DNS lookup
The first step is IP address where the resource is located. this is, DNS lookup.
of domain name system (DNS) server is a server that is used specifically to match website host names ( www.example.com) corresponding to internet protocol again IP address. of DNS The server contains public databases IP address and their corresponding Domain name
For example, when you visit www.example.com, DNS server returns IP address 93.184.216.34 this corresponds to IP address.
1.2. 3-Way TCP Handshake
The next step is TCP connection with the server. this is, 3-way TCP handshake.
First, the client sends a request to open a connection to the server. SYN packet.
The server then responds with: SYN-ACK packet Acknowledge the request and ask the client to open the connection.
Finally, the client ACK packet To the server to check the request.
1.3. TLS handshake
when the website uses HTTPS (encryption HTTP protocol), the next step is TLS connection Via TLS handshake.
A few more messages are exchanged between the browser and the server during this step.
- client says hello: The browser sends a message to the server. TLS Versions and cipher suites to support, and a string of random bytes known as client random.
- Server hello message and certificate: the server is the server’s SSL certificatethe server-chosen cipher suite, and server random (a random string of bytes generated by the server).
- certification: your browser is on the server SSL certificate with the certificate authority that issued it. This way the browser can see who the server is.
- Premaster’s Secret: The browser sends another random string of bytes called the premaster secret. public key the browser SSL certificate from the server.of premaster secret can only be decrypted with private key by the server.
- private key used: The server decrypts the premaster secret.
- Created session key: browser and server generate session key client random, server random, and premaster secret.
- client exit: The browser will send a message to the server indicating that it has finished.
- Server completed: The server sends a message to the browser indicating that the browser has also terminated.
- Provides secure symmetric encryption: The· handshake can be used to continue communication. session key.
Now you can start requesting and receiving data from the server.
later TCP connection is established, the browser can start fetching resources from the server.
2.1. HTTP Request
If you have experience with web development, you will come across the following concepts. HTTP request.
HTTP request Used to fetch resources from the server.For that URLs & type of request (obtain, director, put, erase) is processed.The browser also adds some extra features header to the request to provide additional context.
The first request sent to the server is usually obtain request to fetch HTML File.
2.2. HTTP Response
Then the server uses the appropriate HTTP response for a given request.
In response, status code, header & body.
Next is the main section.the browser HTML parse the file and Dom (Document object model) wood.
This is done by the browser engine, which is the core of the browser (e.g. Gecko for Firefox, Webkit for Safari, Flashing ChromeSuch).
here is an example HTML File:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
3.1. Tokenization
The first step to display a web page is HTML File. tokenization The process of breaking a string into meaningful chunks for the browser, token.
token is the basic component of DOM tree.
3.2. Building the DOM Tree
rexing is the process of transforming the sequence of token in a tree structure called DOM tree.
of DOM tree A tree data structure representing the nodes of the . HTML document.
Note: If your page requires an external resource, it will be handled as follows:
- Non-blocking resource obtained in parallel. For example: image.
- deferred resources fetched in parallel, but executed after DOM tree be built. Example: script WITH
deferAttribute & CSS File. - blocking resource Fetched and executed sequentially. for example:
scriptwithout itdeferattribute.
later DOM tree is constructed, the browser will CSS File to generate CSSOM (CSS object model).
This process DOM tree Building with Tokenization and Generation of CSSOM
As mentioned above, if your page requires a block scriptit is fetched and executed immediately, but DOM tree Construction is paused. script is fetched and executed after DOM tree Construction completed.
whenever script processed by JavaScript engine I like all browser engine It depends on your browser.
5.1. JIT compilation
Assuming you are familiar with the concept of translator & compiler, JavaScript The engine uses a hybrid approach. JIT (just in time)compile.
JIT means just in timei.e. unlike a compiled language such as C.where compile It happens ahead of time (that is, before the code actually runs). JavaScript, compile done while running
Finally give page. the browser DOM tree & CSSOM Render the page.
6.1. Building the render tree
The first step is render tree. of render tree is a subset of DOM tree Only elements visible on the page are included.
6.2. Layout
The next step is render treeThis is done by calculating the exact size and position of each element render tree.
This step Dom Even if only partially, it affects the layout of the page.
Examples of situations in which an element’s position is recalculated are:
- Add or Remove Elements Dom
- Resize your browser window
- change of
width,heightorpositionElements of the
6.3. Painting
Finally, the browser decides which node Calculate its position, which should be visible Viewportit’s time paint Display them (render pixels) on the screen. This phase rasterization phasethe browser transforms each element computed during the layout stage into a real element pixel on screen.
like layout phasethis phase occurs whenever you change the appearance of an element Domeven partially.
Examples of situations in which an element’s position is recalculated are:
- change of
outlineElements of the - change of
opacityagainvisibilityElements of the - change of
background colorElements of the
6.4. Layering and compositing
The final step is to composite the layers. This is done by the browser to optimize the rendering process.
synthesis It is a technique to divide part of the page into layers, painting separate them, synthesis As a page in another thread called compositor thread. If sections of the document are drawn on different layers and overlap each other, synthesis needed to ensure that they are drawn to the screen in the correct order and the content is rendered correctly
Note: Dom update, especially layout & paintis a very costly operation, and low end deviceTherefore, it is important to minimize the number of times it is triggered.
It’s all people! 🎉
