Browser Rendering and Kernel

The browser kernel can be divided into two parts: rendering engine and JS engine. Initially, the rendering engine and JS engine were not clearly distinguished, but as the JS engine became more independent, the kernel tended to refer only to the rendering engine.

Rendering Process

Different browser kernels have different rendering methods, but the overall process is basically the same:

  1. From top to bottom, firstly parse the HTML tags and generate a DOM Tree.
  2. When parsing <link> or <style> tags, start parsing CSS to generate CSSOM. It is worth noting that the parsing of HTML tags and the parsing of CSS are executed in parallel at this time.
  3. When encountering a <script> tag, the browser will immediately start parsing the script and stop parsing the document. This is because the script may alter the DOM and CSS, so continuing parsing would be a waste of resources. Therefore, <script> tags should be placed after <body></body>.
  4. Once the DOM Tree and CSSOM are generated, the two are combined to perform layout, calculating their size, position, and other layout information to form an internal representation model that can represent all this information, known as the render tree.
  5. Based on the calculated information, draw the entire page. The system will traverse the render tree and call the paint method to display the content on the screen.

Repaint

When some elements in the render tree need to update their properties, and these properties only affect the appearance and style of the elements without affecting the layout, such as background-color, it is called a repaint.

Reflow

When a part (or all) of the render tree needs to be rebuilt due to changes in the size, layout, or visibility of elements, this is called reflow, also known as relayout. Every page needs at least one reflow, which happens when the page is first loaded, as the render tree needs to be built.

Kernels

  • IE browser: Trident kernel, also known as the IE kernel.
  • Chrome browser: collectively referred to as the Chromium kernel or Chrome kernel, formerly the Webkit kernel, now the Blink kernel.
  • Firefox browser: Gecko kernel, commonly known as the Firefox kernel.
  • Safari browser: Webkit kernel.
  • Opera browser: originally its own Presto kernel, then Webkit, now the Blink kernel.

JS Engine

The role of the JS engine is relatively consistent and must include DOM (Document Object Model, a standard programming interface recommended by the W3C organization for handling XML) and BOM (Browser Object Model, providing objects for interaction with the browser window independent of the content, such as the window object) in the browser's implementation. The browser generally uses public APIs to create objects that reflect DOM objects into JavaScript. The JS engine is responsible for interpreting, compiling, and executing JavaScript to achieve some dynamic effects on web pages.

Engines

  • Chrome browser: V8 engine.
  • Safari browser: JavaScriptCore engine.
  • Firefox browser: TraceMonkey engine.
  • Opera browser: Carakan engine.
  • IE3~IE8 browser: JScript engine.
  • Edge browser: Chakra engine.

Daily Question

https://github.com/WindrunnerMax/EveryDay

Reference

https://segmentfault.com/a/1190000010298038 https://imweb.io/topic/56841c864c44bcc56092e3fa