As we know from section 1 about browsers, there are many different kinds of browsers, produced by different vendors, and with different functions. So how does a browser render HTML, CSS, JS into a beautiful and useful web page?

It all depends on the browser kernel

Introduction to the Browser Kernel

The browser kernel is divided into two parts: the rendering engine and the JS engine. As the JS engine becomes more independent, the kernel tends to refer only to the rendering engine.

Rendering engine

The rendering engine is essentially the typography engine of the web browser, also known as the template engine. It takes the content of a web page (HTML, XML, images, etc.), organizes information (adding CSS, etc.), and calculates how the web page will be displayed, and outputs it to a monitor or printer.

Some browsers use the rendering engine:

  • Firefox uses the Gecko engine (open source: developer.mozilla.org/zh-CN/docs/…
  • Internet Explorer uses the Trident engine
  • In 2015, Microsoft launched its own new browser, formerly called Sparta, renamed Edge and using the Edge engine
  • Opera first used the Presto engine, but later abandoned it to follow Google’s engine
  • Use webKit engine for Chrome, Safari, opera (open source: webkit.org/)
  • Chrome and Opera start using Blink engine (based on WebKit)

More render hospitality can be referenced: baike.baidu.com/item/ Typography engine /8…

Rendering engine workflow
  • The HTML parser parses the DOM tree (the nodes in the DOM tree, and the CSS styles)
  • Render tree structure (with a certain visual effect and arranged in a certain order on the screen)
  • Layout rendering tree (assign fixed coordinates to each node)
  • Draw the DOM tree (the rendering engine traverses all nodes, drawn by the UI back end)
Webkit workflow

Gechko workflow

JavaScript engine

JavaScript engine used by some browsers: A JavaScript engine is a virtual machine that processes JavaScript scripts and is typically shipped with web browsers.

  • Older versions of IE use the Jscript engine
  • After IE9, use the Chakra engine
  • The Edge browser still uses the Chakra engine
  • Firefox uses the Monkey series of engines
  • Safari uses the SquirrelFish series of engines
  • Opera uses the Carakan engine
  • Chrome uses a V8 engine (open source). NodeJs essentially encapsulates the V8 engine
Browser to introduce JS rendering process

Image source:zhuanlan.zhihu.com/p/27628685