☕ How Web Browsers Work
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
Safari - WebKit Rendering Engine
FireFox - Gecko Rendering Engine
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
Chrome - V8 JavaScript Engine
Safari - JavaScriptCore
FireFox - SpiderMonkey Engine
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.