Post

Browser

Posted
By So Hee Park 1 min read

✅ Main components of the broswer

browser follows HTML and CSS rules based on W3C world wide web consortium
Each tab runs in a seperate process(multiple instances of rendering engine)

Screenshot 2024-08-03 at 09 48 27

1. User Interface

where user interacts with the browser

  • address bar
  • next buttons
  • home button
  • refresh
  • all parts except the window where requested web page is displayed

2. Browser Engine

bridge between user interface and rendering engine

3. Rendering Engine

Screenshot 2024-08-03 at 10 01 21

render the requested web page on the browser screen
interprete HTML, XML documents and images
interpete CSS, generate the layout that is displayed on UI

  • Different browser different rendering engine
    • Chrome: Blink
    • Chrome iphone & Safari: Webkit

4. Networking

retrieves the URLs using HTTP or FTP
handle internet communication, security

  • use cache of documents to reduce network traffic

5. Javascript Interpreter

interprete, execute JS
interpreted results are sent to rendering engine for display

6. UI Backend

draw widgets
not platform specific

7. Data persistence/storage

persistence layer
small database created on the local drive of the computer where browser is installed
store data such as cookies, cache, bookmarks, preferenes

💡 DOM

Document Object Model
how web browser interpretes HTML

Screenshot 2024-08-03 at 09 38 45

💡 Parsing

interprete document so that browser can understand code

✅ Summary of how browser works

  1. Enter URL, hit enter, request is sent to server
  2. Rendering engine parse through HTML, construct DOM tree
  3. Then parse CSS, making style
  4. With HTML, CSS, construct render tree. This render tree will create page with resources and style
  5. Layout of the render tree
  6. Painting the rendering tree with UI backend painting.
  7. Rendering Engine display content on the screen as soon as possible for better user experience. Painting and Layout does not wait for HTML parsing to be complete. Display content while rest of content still keeps coming from the network.

💡 Reference

https://medium.com/@yaduvanshineelam09/how-does-web-browsers-work-ec0f171aedc6

Computer Science, WEB
This post is licensed under CC BY 4.0 by the author.