Public/system-design-101
1
0
Fork 0
mirror of https://github.com/ByteByteGoHq/system-design-101.git synced 2026-04-13 13:27:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

Adds ByteByteGo guides and links (#106)

Browse Source 
This PR adds all the guides from [Visual
Guides](https://bytebytego.com/guides/) section on bytebytego to the
repository with proper links.

- [x] Markdown files for guides and categories are placed inside
`data/guides` and `data/categories`
- [x] Guide links in readme are auto-generated using
`scripts/readme.ts`. Everytime you run the script `npm run
update-readme`, it reads the categories and guides from the above
mentioned folders, generate production links for guides and categories
and populate the table of content in the readme. This ensures that any
future guides and categories will automatically get added to the readme.
- [x] Sorting inside the readme matches the actual category and guides
sorting on production
This commit is contained in:
Kamran Ahmed
2025-04-01 06:16:44 +01:00
committed by GitHub
parent 44f1251199
commit ee4b7305a2
493 changed files with 15791 additions and 1728 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
data/guides/how-does-the-browser-render-a-web-page.md Normal file
View File

@@ -0,0 +1,36 @@
---
title: 'How Browsers Render Web Pages'
description: 'Explore how browsers render web pages: from HTML parsing to display.'
image: 'https://assets.bytebytego.com/diagrams/0090-browser-render-page.jpg'
createdAt: '2024-02-01'
draft: false
categories:
- api-web-development
tags:
- browsers
- rendering
---
![](https://assets.bytebytego.com/diagrams/0090-browser-render-page.jpg)
* **Parse HTML and generate a Document Object Model (DOM) tree.**
When the browser receives the HTML data from the server, it immediately parses it and converts it into a DOM tree.
* **Parse CSS and generate CSSOM tree.**
The styles (CSS files) are loaded and parsed to the CSSOM (CSS Object Model).
* **Combine DOM tree and CSSOM tree to construct the Render Tree.** The render tree maps all DOM structures except invisible elements (such as `<head>` or tags with `display:none;`). In other words, the render tree is a visual representation of the DOM.
* **Layout**
The content in each element of the rendering tree will be calculated to get the geometric information (position, size), which is called layout.
* **Painting**
After the layout is complete, the rendering tree is transformed into the actual content on the screen. This step is called painting. The browser gets the absolute pixels of the content.
* **Display**
Finally, the browser sends the absolute pixels to the GPU and displays them on the page.