Javascript: How Web Browser Works?

Web performance refers to how quickly site content loads and renders in a web browser, and how well it responds to user interaction.

Two major issues in web performance are understanding issues having to do with latency and issues having to do with the fact that for the most part, browsers are single threaded.

How a web page get rendered?

1. Navigation

It occurs whenever a user requests a page by entering a URL into the address bar, clicking a link, submitting a form, as well as other actions.

2. DNS Lookup

If you’ve never visited a site, a DNS lookup must happen.

In DNS, each host name is mapped with an IP address. DNS lookups must be done for each unique hostname the requested page references.

When the browser requests a DNS lookup, it gets responded with an IP address. After this initial request, the IP will likely be cached for a time, which speeds up subsequent requests.

DNS caching takes place on DNS servers. This is done to avoid quering nameservers and servers can instantly reply with the IP address of a domain.

3. TCP Handshake

TCP uses a three-way handshake to establish a reliable connection.
The connection is full duplex(can send and receive), and both sides synchronize (SYN) and acknowledge (ACK) each other. The exchange of these four flags is performed in three steps: SYN, SYN-ACK, ACK.

TCP’s three way handshaking technique is often referred to as “SYN-SYN-ACK”. Once the IP address is known, the browser sets up a connection to the server via a TCP three-way handshake. This mechanism is designed so that the browser and web server can negotiate the parameters of the network TCP socket connection before transmitting data.

4. TLS Negotiation

This handshake, or rather the TLS negotiation, determines which cipher will be used to encrypt the communication, verifies the server, and establishes that a secure connection is in place before beginning the actual transfer of data.

After the 8 round trips, the browser is finally able to make the request.

4. Response

Once we have an established connection to a web server, the browser sends an initial HTTP GET request on behalf of the user. Once the server receives the request, it will reply with an HTML page in binary stream form. This is a text fiel with relevant response headers. The content-type : text/html
means that the file type is HTML and charset: UTF-8 meaning the file is encoded in UTF-8.

This response for this initial request contains the first byte of data received. Time to First Byte (TTFB) is the time between when the user made the request — say by clicking on a link — and the receipt of this first packet of HTML. The first chunk of content is usually 14kb of data.

TCP Slow Start / 14kb rule- The first response packet will be 14Kb. This is part of TCP slow start, an algorithm which balances the speed of a network connection. Slow start gradually increases the amount of data transmitted until the network’s maximum bandwidth can be determined.

5. Parsing

Parsing is the step the browser takes to turn the first chunk of data it receives over the network into the DOM and CSSOM, which is used by the renderer to paint a page to the screen.

It is important for the first chunk of data(14kb) to include the html and css that the browser needs to render the page, even if the request page’s HTML is larger than the initial 14KB packet.

6. Building DOM Tree

The first step is processing the HTML markup and building the DOM tree.HTML parsing involves tokenization and tree construction. HTML tokens include start and end tags, as well as attribute names and values.

Suppose we have the below given HTML code in the HTML file recieved.

Tokenisation

DOM Tree Contruction

During the tree creation, the browser creates a JS object for differnet types of HTML elements present as token. All these are extension of the JS Object Node. For example, for div element, the node is created using HTMLDivElement.

When the parser finds non-blocking resources, such as an image, the browser will request those resources and continue parsing. Parsing can continue when a CSS file is encountered, but <script> tags—particularly those without an async or defer attribute—block rendering, and pause the parsing of HTML.

Preload Scanner- building of DOM occupies the main thread. As this happens, the preload scanner will parse through the content available in the background and request high priority resources like CSS, JavaScript, and web fonts even before the HTML parser reaches requested assets, and they might already be in flight or downloaded.

7. Building the CSSOM

The second step is processing CSS and building the CSSOM tree. The DOM and CSSOM are both trees. They are independent data structures. The browser converts the CSS rules into a map of styles it can understand and work with. Most of the browsers come with a default stylesheet called user-agent. The CSSOM is created by using the user-agent CSS file which is then combined and overridden by the rules specified by the user provided CSS file.

Why is CSS called Cascading Style Sheet ?
Because the styles are cascaded down from the parent to child node if the properties are missing in the child.

Why is CSS render blocking-browser won’t render any processed content until the CSSOM is constructed ?
Until all the CSS is loaded, a CSS rule can be overwritten in some other file. So once all the CSS files are loaded, the rendering is blocked.

8. JavaScript Compilation (Building the Abstract Syntax Tree)

While the CSS is being parsed and the CSSOM created, other assets, including JavaScript files, are downloading (thanks to the preload scanner). JavaScript is interpreted, compiled, parsed and executed. The scripts are parsed into abstract syntax trees. Some browser engines take the Abstract Syntax Tree and pass it into an interpreter, outputting bytecode which is executed on the main thread. This is known as JavaScript compilation.

9. Render

The third step in the critical rendering path is combining the DOM and CSSOM into a render tree. Chrome uses Blink as the Rendering Engine.

Style : The computed style tree, or render tree, construction starts with the root of the DOM tree, traversing each visible node. The <head>, nodes with display: none are not included in the render DOM tree but the nodes with visibility: hidden are included as they do take up space.

10. Layout

The fourth step in the critical rendering path is running layout on the render tree to compute the geometry of each node. Layout is the process by which the width, height, and location of all the nodes in the render tree are determined, plus the determination of the size and position of each object on the page. Reflow is any subsequent size and position determination of any part of the page or the entire document.

The first time the size and position of nodes are determined is called layout. Subsequent recalculations of node size and locations are called reflows. In our example, suppose the initial layout occurs before the image is returned. Since we didn’t declare the size of our image, there will be a reflow once the image size is known.

11. Painting

The last step in the critical rendering path is painting the individual nodes to the screen, the first occurrence of which is called the first meaningful paint. In the painting or rasterization phase, the browser converts each box calculated in the layout phase to actual pixels on the screen. Painting involves drawing every visual part of an element to the screen, including text, colors, borders, shadows, and replaced elements like buttons and images. The browser needs to do this super quickly.

Painting can break the elements in the layout tree into layers. Promoting content into layers on the GPU (instead of the main thread on the CPU) improves paint and repaint performance. Properties and elements that instantiate a layer, — <video> and <canvas>, element with propertyopacity, a 3D transform, will-change, and a few others.

Layers do improve performance, but are expensive when it comes to memory management.

12. Compositing

When sections of the document are drawn in different layers, overlapping each other, compositing is necessary to ensure they are drawn to the screen in the right order and the content is rendered correctly.

As the page continues to load assets, reflows can happen (recall our example image that arrived late). A reflow sparks a repaint and a re-composite.

What is the difference between Reflow and Repaint?

Reflow involves changes that affect layout of an element. Resizing the browser window, using JavaScript methods involving computed styles, adding or removing elements from the DOM, and changing an element’s classes are a few of the things that can trigger reflow.

Repaint occurs when changes are made to an elements skin, but do not affect its layout like setting outline, visibility, background or color property of an element.

This is a summarised content from https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work for self -learning.