1. Understand the browser

  1. Browser kernel concepts

The browser kernel is divided into two parts: render Engin and JS Engin.

Rendering engine: responsible for interpreting the syntax of the web page (HTML, javaScript, introducing CSS, etc.) and rendering (displaying) the web page

Js engine: javaScript interpretation, compilation, and execution

Mainstream kernels: Trident(IE), Gecko(FireFox), Webkit(Safari), Presto(pre-Opera kernel, deprecated), Blink (Chrome)

2. Progress history of webKit browser rendering engine



3. Introduction to the WebKit browser kernel




HTML interpreter: An interpreter that interprets HTML text into a DOM tree, which is a document representation.

CSS interpreter: Cascading style sheet interpreter that computes style information for individual element objects in the DOM and provides the infrastructure for calculating the layout of the final web page.

Layout: After the DOM is created, WebKit needs to combine the element objects in the DOM with the style information, calculate their size and location and other layout information, and form an internal parity representation model that can represent all this information.

JavaScript engine: Using JavaScript code, you can modify the content of the web page, as well as the information of CSS. The JavaScript engine interprets the JavaScript code and modifies the content and style information of the web page through DOM interface and CSSOM view mode, thus changing the rendering result.

Drawing: use the graphics library to draw the nodes of each web page into image results after the layout calculation.

Chromium, CEF, Webkit, JavaScriptCore, V8, Blink

  1. V8 (read more here)
  2. Webkit

    (refer: WInside ebKit technology)

    Apple KHTML is an open source based on KDE (Linux desktop system), including Webcore and JavaScriptCore engines. After comparing Gecko with KHTML, Apple chose the latter because of its clean source code structure and extremely fast rendering speed. In 2008, Google released chrome, which uses Chromium kernel based on Webkit

    Apps: Safari, Mail, App Store, etc

    Its layout:

    When WebKit creates RenderObject objects, each object does not know its position, size and other information. Webkit calculates its position, size and other information based on the box model, which is called layout calculation/typesetting.

    Classification of layout calculation: The first is the calculation of the entire RenderObject tree; The second type is a calculation of a subtree in the RenderObject tree, which is common for text elements or overflow: Auto blocks.

    Layout calculation: Layout calculation is a recursive process because the size of a node usually requires the location, size, and other information of its children to be calculated first.

    Supplement:

    Why do transform animations perform better than directly setting geometry properties?

    1. Webkit rendering process: Style -> Layout(reflow occurs here) -> Paint (repaint occurs here) -> Composite, transform is located in ‘Composite’, Width, left, margin, etc. are in the ‘Layout’ layer, which must result in reflow.

    2. Modern browsers enable GPU acceleration for transform, etc.

    Style -> Layout(reflow occurs here) -> Paint (repaint occurs here) -> Composite (transform occurs at this time)

    (refer to:

    CSS Animation performance optimization

    Explain the animation performance of Transform from the perspective of redrawing and rearranging

    )

  3. JavaScriptCore engine

    It was originally developed based on KJS as an interpreter based on abstract syntax trees, with poor performance. In 2008 apple rewrote the compiler and bytecode interpreter called SquirrelFish



    (refer: JavaScriptCore in-depth parsing)

  4. Chromium/Blink

    Chromium is based on WebKit, but the Code of WebKit is combed into a more readable, multi-process framework

    Chromium page loading process, Browser process and Render process cooperation to complete. The process of loading web pages is initiated by the Browser process, and the process of requesting web content from the server is also completed by the Browser process. The Render process parses the downloaded content of the web page, resulting in a DOM Tree. With the DOM Tree in place, the Render process is ready to Render the page

    (Refer: Chromium page loading introduction)

    Blink: Rendering engine developed in Chromium project, based on and separate from Webkit

    More powerful rendering and layout:

    1. Pursue multi-threaded layouts
    2. Style recalculation
    3. Do not create renderers for hidden iframes
    4. Fix old errors such as plug-in uninstallation when setting the plug-in to display: None
    5. Iframe is uninstalled asynchronously, which is faster

    (Refer: Blink developer FAQ)

5. CEF (Chromium Embeded Framework)

A framework for embedding browser functionality (page rendering, JS execution) into other applications, supported on Windows, Linux, Mac platforms

History of CEF:

  • CEF has two versions of the Chromium Embedded Framework: CEF 1 and CEF 3
  • Development of CEF 2 was abandoned after the Chromium Content API.
  • CEF 1 is a single-process implementation based on the Chromium WebKit API. It is no longer actively developed or supported.
  • CEF 3 is a multi-process implementation based on the Chromium Content API with performance similar to Google Chrome.

Application:

1) Make a browser

2) The cross-platform desktop infrastructure scheme electron.js

3) Client (such as desktop APP application)

Benefits: It’s easy to develop hybrid Web and native applications

Third, summary

V8 engine is Google’s own JS engine

Webkit is based on KHTML and contains JavaScriptCore

Chromium derived Blink based on Webkit

CEF is the application framework that includes Chromium browser

The father of all: KHTML