🧸 Implement a Toy Web Browser

[jzhang026]

speaker

Adrian

intro

Once upon a time, an interviewer asked me what all happens behind the scenes from the time a URL was typed in the browser to the time when the page was shown on the screen. and if you search the question on Google, you may see quite a lot of answers, and the focus of each answer is different.

I recently built a toy browser with javascript, which tries to render an HTML string into an image. Along the process, I got a deep understanding of how browser rendering works. Feature of the toy browser:

1. parse HTTP response
2. construct the DOM tree with the returned HTML string
3. Compute CSS and match CSS rules with DOM
4. calculate the layout.
5. render an image described by the HTML string.

resources

• slides https://docs.google.com/presentation/d/1Lrxr_NYeH4VAlV5-mAhmp8I8gjhkG-H5wsqH8AEmtUI/edit?usp=sharing
• code https://github.com/jzhang026/web-browser-model
• video
• more links
  1. match dom element with css selectors https://gist.github.com/jzhang026/a802cb6b8b62267cb080c7d8bf787c89
  2. HTML tokenization specification Follow the specification to build state machine for constructing of DOM tree.
  3. CSS specificity Specification for CSS rules priority.
  4. Chunked Transfer Coding parse HTTP body by Chunked Encoding

Scheduling

• Estimated duration: ⚡️ 🧙🏻‍♂️ 35 mins
• Ready by: 05 Jun
• Needs dry run: no

[wgao19]

Hey @jzhang026 thanks again for this talk! Here's the link to the video recording of the talk: https://youtu.be/WRgeNqVZXEU

(sorry I forgot to hit "record" at the very beginning therefore the front part was cut off.. in the live stream playback, can still see the full talk)