How browsers load websites

Note: The content in this article is currently incomplete, sorry about that! We are working hard to improve the MDN Learn Web Development section, and we will have places marked as incomplete ("TODO") finished soon.

In this article, we talk through the rendering process of a website — when a browser has received the files and assets that make up a website, how are they put together to create the finished experience that the user sees?

Prerequisites: Basic familiarity with your computer operating system, web browsers, and web technologies.
Learning outcomes:
  • The different kinds of assets that are returned in an HTTP response.
  • Static versus dynamic files.
  • How the different files are assembled to create a web document that is then displayed by the browser.
  • Why the browser is sometimes seen as a hostile programming environment, but also an awesome programming environment.

The different types of file returned in an HTTP response

  • HTML files.
  • CSS files.
  • JavaScript files.
  • Media assets such as images, videos, audio files, PDFs, and SVGs.
  • Other kinds of file that the browser can't handle natively and hands off to a relevant app on the device, for example Word documents and PowerPoint slide decks.

Static versus dynamic files

Some downloaded code files will be static (they exist on the server in the same form as they are downloaded), and some will be dynamic (generated by the server based on varying data).

How files are assembled to render a web document in the browser

  • A web page is requested (e.g. by clicking a link).
  • A DNS lookup is performed to find the location of all the assets to download for the web page.
  • The assets start to be fetched. This involves TCP handshakes, TLS negotiation, and HTTP requests and responses.
  • A DOM tree is assembled from the downloaded HTML.
  • The CSSOM is built from the CSS rules.
  • The JavaScript is parsed, interpreted, compiled, and executed.
  • The accessibility tree is built for assistive technologies (e.g. screen readers) to hook into.
  • The render tree is created from the DOM and CSSOM, to identify visual styles applied to each DOM node.
  • Page layout is calculated.
  • The styled, laid-out nodes are painted to the screen in the right order, via painting and compositing.

The browser: hostile versus awesome programming environment

Why the browser is sometimes seen as a hostile programming environment:

  • Unlike other programming environments, it is much harder to make guarantees about the environment your code will run on.
  • You cannot guarantee a user's OS, browser, language, location, network connection, CPU, GPU, memory, etc.
  • You need to embrace uncertainty and learn to program defensively. This relies on adhering to the best practices discussed in The web standards model. This would also be a good place to look at related concepts such as error handling, feature detection, and responsive design.

The flipside — why the web is an awesome programming environment:

  • Its basic state is accessible and linkable. Some of these basics are harder to achieve in other environments.
  • App delivery across the web is simple and powerful.
  • Updates are easy — in many cases, you can just reload the browser tab. You don't need to worry about constantly downloading and installing large packages.
  • The community is vibrant and helpful, and there are lots of great resources available to learn.