Contents

About browser

   Jul 27, 2023     1 min read

This is an article about browsers.

Have you ever wondered about your favorite browser? I’ve always been more concerned with the order of code execution, such as the life cycle of my code, than how my code or project is rendered in the browser. I’ve suddenly become curious about browsers, and I’d like to take this opportunity to better understand them.

First, I want to understand what happens from the time a user approaches a URL to the time web content is displayed inside the browser area.

What makes up a browser?

**It’s the “engine. ** A browser is actually made up of multiple engines. If we look at the Chrome browser as an example, the browser engine is called Chromium, the rendering (layout) engine is called Blink, and the JS runtime (JS engine) is called V8.

What is a browser engine?

The browser engine is involved in the process from the user performing an action to the graphical representation of the result on the screen. As the web has evolved, the engine has become more sophisticated, and the rendering engine, which displays the results on the screen, and the JS runtime engine, which parses the JS syntax, have been separated.

What is a rendering engine?

The rendering engine is responsible for parsing the HTML document and CSS requested by the user and drawing it on the screen. The distinction between a browser engine and a rendering engine is often unclear because a JS engine can run independently without a browser, whereas a rendering engine cannot.

How a rendering engine works

The rendering engine receives documents from the network layer.

  1. HTML parsing: The engine parses these tags and translates them into Document Object Model (DOM) nodes, which are organized in a hierarchical structure to build a DOM tree.
  2. CSS parsing: After the HTML is parsed, the CSS is parsed to generate the CSSOM.
  3. Attachments (Render tree generation): By combining the DOM tree and CSSOM, you can build a Reder tree that contains visual information such as color and area. This process excludes DOM nodes that are not visible on the screen.