Demystifying the Web: Understanding Chromium’s Architecture

Ever wondered when you write the command document.getElementByClassName("test") in the console why don’t you get the output as an element <a class='test'>Gmail</a> instead, you will get this!

Output 1

okay, let’s not waste time and deep dive into it.

Understanding How Browsers Interpret HTML, CSS, and JavaScript.

Creating a website begins with HTML for structure, CSS for style, and JavaScript for interaction. First, let’s explore some of the major components of a browser and also the workings of a browser.

Figure:1. CHROMIUM’S ARCHITECTURE

Components of Browser:

1. Rendering Engine: The rendering engine interprets and executes web content by providing default behaviors (for example, drawing <input> elements) and by servicing calls to the DOM API. Rendering web content proceeds in several stages, beginning with parsing, building an in-memory representation of the DOM, laying out the document graphically, and manipulating the document in response to script instructions. The rendering engine is also responsible for enforcing the same-origin policy, which helps prevent malicious websites from disrupting the user’s session with honest websites. Some of the engine examples are.
   ex: Apple created WebKit, Google originally used WebKit for its Chrome browser but eventually forked it to create the Blink engine, and Mozilla developed the Gecko engine for its Firefox.
2. Browser Kernel: As the intermediary between UI and the rendering engine, the browser kernel is pivotal. Responsible for managing multiple rendering engine instances, it also implements the browser kernel API. Notably, it crafts a tab-based windowing system, complete with a location bar showcasing active tab URLs and security indicators. Additionally, the kernel oversees persistent user states, including bookmarks, cookies, and saved passwords.

Note: The architecture allocates high-risk components, such as the HTML parser, the JavaScript virtual machine, and the Document Object Model (DOM), to its sandboxed rendering engine.

The assignment of tasks between the rendering engine and the browser kernel.

Interestingly some of the assignments of browser components to modules are driven by historical artifacts for example:
1. The browser kernel is responsible for displaying JavaScript alert dialog boxes, whereas <select> drop-down menus are displayed by the rendering engine.
2. cookie database, are implemented by the browser kernel because of its direct access to the file system. Other features, such as regular expressionsare implemented by the rendering engine because they are performance-sensitive and have often been the source of security vulnerabilities.

Now that we’ve grasped the terminology, let’s delve into the mechanics:

STEP 1: The browser kernel receives your HTML file, intertwined with CSS and JavaScript, as raw bytes — its native language being only 1’s and 0's.

STEP 2: This data stream is then transmitted to the rendering engine for interpretation. Initially, the browser engages in character encoding, directing the rendering engine on how to translate this digital code into recognizable characters, numbers, and symbols.

STEP 3: Subsequently, HTML tokenization takes place, where the browser discerns common tokens, such as tags like <h1>, <p>, and <script>, crucially defined by developers.

STEP 4: Following this tokenization, each tag is converted into objects for example:

const object={
   nodeName:h2
   nodeValue:"Hello World",
   hidden:false,
   ...rest
}

STEP 5: However, mere object creation is insufficient, Here, the rendering engine arranges them hierarchically, delineating parent-child relationships and crafting a Document Object Model (DOM).

STEP 6: Hang On! CSS, the silent conductor of style, isn’t left behind similarly to CSS, the rendering engine crafts the Cascading Style Sheets Object Model (CSSOM).

STEP 7: Indeed, the challenge lies in managing the created objects (DOM) effectively, providing developers with the means to access and manipulate them at will. This is where NodeLists and HTMLCollections come into play.

NodeList:

• Returned by querySelectorAll: When you use the querySelectorAll method in JavaScript to select multiple elements in the DOM, the browser returns a NodeList containing all matching elements.
• Live Collection: NodeLists are live collections, meaning they are automatically updated as the DOM changes. If elements matching the selector are added or removed from the DOM, the NodeList updates accordingly.
• Iterability: NodeLists can be iterated over using methods like forEach or indexed using bracket notation.

HTMLCollection:

• Returned by DOM collections: Some DOM properties, such as children or getElementsByTagName, return HTMLCollections. These collections contain live lists of elements with specific characteristics.
• Non-live: Unlike NodeLists, HTMLCollections are not live. If elements matching the criteria are added or removed from the DOM after the collection is created, the HTMLCollection does not automatically update.
• Named access: HTMLCollections can also be accessed using named keys, like collectionName['elementName'].

STEP 8: The rendering engine emits bitmaps of the rendered document.

Code -> Bitmap

Thank you for reading to the end for those who are eager to delve deeper into the Chromium architecture, I encourage you to explore further from here.

Follow for the latest on web architecture and more!