How does a browser displays a web page

We lift the hood of a rendered Web engine (WebKit) to understand the process of web page rendering with “profiled” examples with Chrome’s DevTools.

What happens exactly when you tap a URL, until you see the content of a web page? There is a well defined process of actions that the browser do in the intern, the construction of DOM, “render trees” and the “paint” operation. The rendering of a web page isn’t just a simple action that you do through the browser, but a set of little operations and reactions to interactions. Go look under the hood and you’ll be surprised by the quantity of things done during only few milliseconds.

As designers or web developers, understand how browsers work helps us take the best decisions and understand some good front development practices makes a more efficient Web.