Skip to content

🌍 The browser

A web browser (commonly referred to as a browser) is a software application for accessing information on the World Wide Web. Each individual web page, image, and video is identified by a distinct URL, enabling browsers to retrieve and display them on the user's device.

That's Wikipedia's definition of a web browser. Pretty boring, ain't it ? Let's define it a different way:

A web browser is the vehicle that allows you to view, interact and discover everything from what's going on in the USA to some guy that loves hats.

We all know how to use a web browser - you're using it right now to view this page. You probably also have other pages open in the background, such as YouTube or Facebook. Some of those pages might send you notifications, or play media content such as video and audio. But what exactly makes it tick ?

Browser logos

How does the browser know what to render

If you hit Ctrl + U in this page, you'll see something similar to this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <meta name="lang:search.language" content="en">
      <link rel="shortcut icon" href="../../assets/images/favicon.png">
      <meta name="generator" content="mkdocs-0.17.3, mkdocs-material-2.8.0">
      <title>Browser - .js Summer Course</title>
............................................................................

This code is called HTML, and is the language that defines the "scaffolding" of any webpage. We'll dive into HTML later, but for now you only need to know that the elements that are between <> brackets (like <meta>) are called tags, and are the building blocks of the language.

HTML and its tags define a tree, which represents the structure of our web page. That is why we call it our "scaffolding": it builds our page like a resistance structure builds a house.

If you dive deeper into the source code of any webpage, you'll come across something like this:

1
2
3
4
5
6
7
.md-nav__title {
  display: inline-block;
  margin: .4rem;
  padding: .8rem;
  font-size: 2.4rem;
  cursor: pointer
}

This is HTML's counterpart, CSS. While HTML defines our page's structure, CSS tells the browser how elements are supposed to look. We'll look into CSS in depth a bit later.

How does rendering actually happen ?

The page rendering process is broken up into multiple steps, as shown in this diagram:

Browser rendering pipeline

Image source

If you follow the pipeline above, you'll see that the steps are more or less as follows. We'll ignore the Script blocks for now.

  • Parse HTML and generate the page structure tree (we call this the DOM, or the Document Object Model)
  • At the same time, parse any CSS we have and create the style structure (this is called the CSSOM, a counterpart tree of the DOM that tells us how each element should look)
  • After we have both the DOM and the CSSOM, we match the nodes in each tree and begin rendering and displaying on the screen.

There are a few extra steps in the pipeline such as reflow / layout, paint and composite, but all you really need to follow in the image above are the blue and purple boxes.

Examples

A visualisation of this process for an older version of the Twitter site:

As you can see, the browser first positions the elements in the top-left corner of the parent element (most of the time this is the browser window), renders the contents, applies the required CSS and then positions the element correctly in the page.

Another visualisation of a more complex website is here:

Notice how the browser begins to render a lot of elements between 0:20 and 1:30 ? Those are the individual options available in the dropdown menus (day, month, year) that we need to have ready to display when the user toggles the dropdown.

As you can see, the browser does a huge amount of work in a short amount of time in order to present you with a website. And this is just the structure and painting - we haven't gotten to interactivity yet.

For a more in-depth look at how the browser renders our page, check out this talk by Ryan Seddon at JSConf EU 2015:

Also, if you are interested in learning more about the specifics of how the browser renders a page, check out this artucle from Mozilla Hacks.