[Toy Browser] Introduction

As a web developper, my daily work is to present data in the browser. Browser, I use it everyday, but how does the browser work ? I don’t really understand.

To learn it, I created a toy browser. It can send a http request, receive the response, and render the response.

There will have several articles to show the toy browser, and this one will give a quick introduction and set up of the toy browser.

Shout out to wintercn. I learned the toy browser from his videos.

Introduction

When we want to visite some websites, we use a browser. We enter the url of the website, and wait for the homepage presented in the browser. Well, this scenario includes the basic functions of a browser. To make it clearer, we can separate it into 5 steps.

browser jobs

1. HTTP request and Response parse: When we enter the url of a website, the browser will send a request to the server. It tells the server, the client needs the homepage. Then, the server sends the homepage. The browser should receive this response, and parse it. The toy browser should extract the HTML file from the response.
2. HTML parsing and CSS computing: HTML file is an encoded homepage. The browser needs to decode it. In this part, the browser will turn HTML file into a DOM Tree, which can be used to render the homepage. CSS sets the style of the homepage. For example, CSS defines where the logo of the website should be placed. In this part, the browser will apply CSS rules to the elements in DOM Tree to make sure that all the elements has the correct style.
3. Layout and Rendering: Some CSS rules can be abstract, like flexor grid layout. The browser need to translate CSS layouts into direction instructions, which means giving the properties, like position, width, height, etc. And these instructions need to be mounted on DOM Tree, too. Finally, the DOM Tree will be rendered as an image.

Set up

Both toy browser and the server are written in JavaScript. Before installing it, please download npm and node.js.

My toy browser is available on my Github. The set up instruction is in the README. Github link

Clone it, and try it out :)