Web Browser is a big and sophisticated application, built from multiple components. It obligated to satisfy different boring standards, to facilitate developers with stable contracts. You might know these contracts as HTML, CSS, and JavaScript. Any valid code or markup will be recognized and processed by one of the browser modules. The browser glues together all its modules with the Browser Object Model (BOM) API, aka [Web API](https://developer.mozilla.org/en-US/docs/Web/API). This is something that empowers JavaScript to operate on HTML and CSS. We will get back to it in more detail later. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7j929vsc42e4dlb2rjn.jpg) A good example of Web API is [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) or its predecessor the [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest), both are used to communicate with a remote server over HTTP. Yet another useful tool from Web API toolbox is the [File System API](https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API), allowing communication with the underlying file system. ## The Browser Engine ### Rendering Let's slightly touch the browser rendering process to get ourselves familiar with the main actors. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mklwiueebfgism82g0m8.png) Once the browser receives HTTP Response with HTML file, it'll try to break it down into a _Document Object Model_ ([DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)) Tree, download if necessary CSS and break it into _CSS Object Model_ ([CSSOM](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model)) Tree. After receiving following index.html ```html

I like potatoes

``` And download referenced example.css ```css body { font-size: 5vw; } span { color: brown; } ``` As an intermediate step browser will produce these two trees 🌳🌳 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8kpzzso9c1ryfhw41v3.png) After it is done, it'll try to merge those trees and finalize results in another tree, known as a _Render-Tree_. This tree represents all nodes needed to be rendered, basically everything that have to be shown on the screen. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k013wf956hrk2n51vp8f.png) The last two steps in the rendering process are _Layout_ and _Paint_. _Layout_ computes the exact position and size of each object, calculates the geometry based on the _Render-Tree_. Ultimately _Paint_ step receives the _Final Render-Tree_ and renders the pixels to the screen. The _Web API_, we spoke about before, provide a mechanism for _DOM_ and _CSSOM_ manipulation. Which reflects on a render-tree. Hence what you see on the screen. ### Notes _Browser Engine_ provides an API for interaction and state-mutation. It is important to note, that these APIs controlled and implemented by the browser. They might be accessed and consumed through the JavaScript code. However, nor JavaScript neither JavaScript Engine has any direct relation to it. There's no generic browser platform, each browser comes with its own Browser Engine, e.g. Trident for IE, [Blink](https://chromium.googlesource.com/chromium/src/+/master/third_party/blink/) for Chrome, [Gecko](https://github.com/mozilla/gecko-dev) for Firefox, etc. So next time you find a dodgy styling behavior in IE, you know whom to blame 😈. ## The JavaScript Engine The JavaScript code you've written, have never ever been executed in its original shape... 🙀 ### Code processing As we know, the first thing that hits the browser is HTML file which presumably contains a JavaScript script reference. The Browser engine starts producing the forest of trees and at the same time [_HTML Parser_ finds the](https://html.spec.whatwg.org/multipage/scripting.html#the-script-element) `

browserengine

Web Browser Anatomy

Join Our Newsletter. No Spam, Only the good stuff.