3. How browsers work #
Created Saturday 23 January 2022
The browser’s high level structure #
The browser’s main components are:
- The user interface: this includes the address bar, back/forward button, bookmarking menu, etc. Every part of the browser display except the window where you see the requested page.
- The browser bridge (engine): marshals actions between the UI and the rendering engine.
- The rendering engine : responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen.
- Networking: for network calls such as HTTP requests, using different implementations for different platform behind a platform-independent interface.
- UI backend: used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods.
- JavaScript interpreter. Used to parse and execute JavaScript code.
- Data storage. This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem. ![[…/…/assets/3_How_browsers_work-image-1-c17f2814.png]]
Code to Display flow #
![[…/…/assets/3_How_browsers_work-image-2-c17f2814.png]] ![[…/…/assets/3_How_browsers_work-image-3-c17f2814.png]]
- parse HTML --> DOM tree and parse CSS and apply selectors --> CSSOM tree
- DOM and CSSOM are combined to create “render tree”. This contains visible nodes and their height/width and other styles.
- Layout/Reflow: Layouts (dimensions and coordinates) are calculated.
- Repaint: Render tree is finally painted using UI backend (connected to OS). ![[…/…/assets/3_How_browsers_work-image-4-c17f2814.png]] The flow of HTML, CSS code to render.