☕ How Web Browsers Work

June 05, 2021

Hi Everyone,

Hope you’re all having a fantastic day!

Today’s tech dive will be on the internals of modern web browsers.

The interview question of the day is from Microsoft and our last interview question (and solution) is on Binary Trees.

Interviewing.io is an awesome resource.

Book realistic mock interviews with senior FAANG engineers who will give you detailed and actionable feedback on exactly what you need to work on.

They prepare you for the pressure and stress that comes from an actual interview setting.

You don’t pay anything until you’re hired.

Check them out here.

Tech Dive

How Web Browsers Work - This is an amazing deep dive into the internals of web browsers. It’s focused on WebKit ( a rendering engine used by Safari and the basis of the rendering engine used by Chrome) and Gecko ( a rendering engine used by Firefox). Here’s a quick summary…

The Web Browser’s High Level Structure

Browser User Interface

The address bar, back button, bookmarking menu and the window for displaying the web page.

The Browser Engine

Processes actions between the Browser User Interface and the Browser’s Rendering Engine. The Browser Engine coordinates actions like clicking the back button or navigating to a new web page.

The Rendering Engine

Responsible for taking in the HTML/CSS resources given from a web server and parsing that into the DOM (Document Object Model).

The Rendering Engine then takes the DOM and creates the layout of the web page and “paints” it with the correct color scheme (using the CSS provided).

Rendering Engine Basic Flow

Examples of Rendering Engines include

Here’s a more detailed look at the flow for WebKit

Networking

Responsible for making network calls to web servers. You can view the Network calls the browser is making by looking at the Network tab in your browser’s DevTools.

JavaScript Engine

Used to parse and execute JavaScript code on the DOM (Document Object Model). The JavaScript code is provided by the web server, or it can be provided by the web browser (browser extensions or features of the browser like automatic ad-blocking).

Early browsers used JavaScript interpreters, but modern JavaScript engines use Just-In-Time compilation for improved performance.

Examples of JavaScript Engine include

UI Backend

This layer is responsible for drawing the basic widgets like select or input boxes and windows. Underneath it uses operating system UI methods.

Data Storage

The browser needs to save data locally (cookies, cache, etc.) so the Data Storage component handles this part.

Modern browsers also support storage mechanisms like localStorage, IndexedDB, WebSQL and FileSystem.

Check out the blog post for a much more detailed discussion!

Interview Question

You’re given a sorted array of integers as input (sorted in ascending order).

Convert the array to a height balanced BST.

We’ll send a detailed solution tomorrow, so make sure you move our emails to primary, so you don’t miss them!

Gmail users—move us to your primary inbox

  • On your phone? Hit the 3 dots at the top right corner, click "Move to" then "Primary"

  • On desktop? Back out of this email then drag and drop this email into the "Primary" tab near the top left of your screen

Apple mail users—tap on our email address at the top of this email (next to "From:" on mobile) and click “Add to VIPs”

Previous Solution

As a refresher, here’s the last question

You are given the root node of a Binary Search Tree and a L and R value.

Return the sum of values of all the nodes with a value between L and R inclusive.

The Binary Search Tree will have unique values.

Here’s the question in LeetCode.

Solution

We can solve this by utilizing a Depth-First Search.

We run a DFS on the Binary Search Tree and keep a running tally of the sum of the nodes in the tree (if the value of the node is between L and R).

Additionally, we can “prune” the tree by avoiding DFS on nodes that we know will be out of the L and R range based off the properties of a Binary Search Tree.

If node.value <= L then we don’t have to run the DFS on node.left.

If node.value >= R then we don’t have to run the DFS on node.right.

You can view the Python 3 code here.

The time complexity is linear and the space complexity is constant.

If you want to practice more questions like this with top engineers at Google, Facebook, etc. then check out Interviewing.io.

You can book realistic mock interviews with senior FAANG engineers who will give you detailed and actionable feedback on exactly what you need to work on.

You don’t pay anything until you’re hired.

Check them out here.