Hello, I am the smiling snail 🐌.

Recently, I read a series of articles about how to write a browser rendering engine.

It implements a small rendering engine, and gives the specific implementation code, a clear description of the workflow. From what I can tell, this is pretty useful for understanding how modern browser rendering engines work.

Of course, existing rendering engines are so complex that it would be difficult to implement such a large system.

But just think, if we through a small engine, to comb its main workflow, to see the big, understand the underlying principle, for the front end of the basic knowledge system is also of great benefit.

So, I read while knocking, using rust language to follow through. As for why rust is used, the reason is simple: the article is written in rust.

But I’ve never been in contact with Rust before. What if I don’t understand it? In order to understand more thoroughly, I simply learned the basic syntax of Rust and began to type the source code character by character.

This is the dumbest way to do it, but it’s probably the most effective way for me to do it. From the lines of code, to understand its design ideas, implementation methods, workflow.

Although you may encounter grammar that you don’t understand, it is good to look it up and understand its meaning, not to go too far. Because my main goal is to understand the code logic and understand the whole principle, not to study rust’s syntax.

Consider that most mobile developers are not familiar with rust. So I’m going to implement it again with Swift. At the same time, this is also the process of my hands-on practice of SWIFT, which is also a kind of skill practice. After all, ordinary work with not much, just will pay attention to it.

Let’s take a quick look at the rendering engine workflow to get a general idea. As shown below:

In general, it is divided into these stages: HTML parsing → CSS parsing → node style processing → layout → drawing. Each stage has its own product.

In the next few articles, we will cover the above process and take you through the implementation of a small engine, including the following parts:

  • HTML parsing
  • CSS analytical
  • Generate style tree
  • Generate layout tree
  • draw

Stay tuned