This is the third day of my participation in Gwen Challenge.

In fact, I have had this idea for a long time, but I have not started to write it, just to catch up with the daily activities of the Nuggets, I want to realize it again, and then record the realization process.

Source of Ideas

Some time ago when I was studying Babel, I wrote a small book, in which there was a case of implementing JS interpreter based on Babel Parser. When I was writing that case, I was thinking that the interpretation execution of JS has been realized, whether to go further and add the rendering part to write a simple browser.

Recently I looked at the source code of PostCSS, the implementation of CSS Parser is also clear, and I can realize the parse from CSS to AST by myself.

I’ve written HTML Parser many times, like Vue Template Parser, WXML Parser, etc. HTML to AST conversion is also implemented.

Recently, I have also written an article on the relationship between Event Loop and JS engine and rendering engine, and an article on the principle of cross-end engine, which describes how to use event loop to integrate JS interpretation execution and CSS rendering, sharing a thread to complete rendering and logic. And how to implement a cross-end engine based on container thinking.

These things together, in fact, is a simple browser implementation ideas, so I want to take advantage of this more text activities, to implement it. One is a synthesis of the output during this time, and the other is a deeper understanding of the environment in which the front-end code runs. I also want to give you some inspiration.

Overview of implementation Ideas

This article will cover the implementation ideas, and the implementation will start in the next article.

html parser

We will implement an HTML Parser that parses HTML strings into a DOM tree, using a traversal, which is the same idea as vue Template Compiler’s Parser.

css parser

We’ll implement a CSS parser that parses CSS strings into A CSS tree, similar to postCSS parser.

Layout engine

With HTML Parser and CSS Parser, we combined them into a Render Tree, and then implemented the layout engine, which computed the styles into specific coordinates.

Rendering engine

With specific coordinates, we can render. Here we will render based on canvas. At this stage, the HTML and CSS are displayed on the interface.

Js interpreter

Js string interpretation execution, first need a JS parser, this is not implemented by itself, use acron on the line, then do their own interpretation execution. Implements scope and function execution, injects several binding events, and implements apis for manipulating the DOM.

event loop

Both rendering and logical execution are implemented, but if they run on the same thread, they need to be scheduled via an Event loop. Js is executed in the manner of one macro task and all microtasks. Each time the loop ends, check whether rendering is needed, and render is refreshed at the rate of 16 ms per frame.

We will implement the logic of event loop fetching events repeatedly by setTimeout, because the main thread will be blocked by an infinite loop. (in c++ we can implement event loop by an infinite loop, because other threads are putting event objects in the queue.)

This enables the frame-rate refresh of the render and the execution of the JS logic.

Network Resource Download

The above implementation of HTML, CSS, JS rendering and execution, and the implementation of the event loop scheduling. These resources are downloaded from the web, so you need to implement a download module that can download HTML from a URL and parse out the links to download it.

Static server

HTML, CSS, JS and other resources are downloaded from the Web server. The server also needs to be implemented through THE HTTP protocol. It can be a simple static server or a dynamic server with some logic.

Browser interface

Since it’s a browser, there must be a place to enter the URL and a place to display the content, so we’ll make an interface with the address bar on top for entering the URL and the content area on the bottom for displaying the rendered content.

The overall architecture diagram is as follows:

conclusion

This article is the first in a series on Writing a Simple Browser. It covers the origin of the idea, the overall implementation idea, and the general idea for each part.

First, HTML Parser, CSS Parser and JS Parser will be implemented by themselves except FOR THE JS parser which will use Acorn. Then, layout engine and rendering engine will be implemented to realize the interpretation and execution of JS AST. Event loop will be used to synthesize the two. Implement scheduling of rendering and logic. After adding the download of network resources, the interface of the browser, is a simple browser, the idea is feasible.

Each part will be explained in a subsequent article, and the source code will be posted on Github, stay tuned.