This content is the author’s learning record about webKit technology (PS includes the author’s own cognitive understanding). Please understand and point out any mistakes, and the author will correct them in time. On the way of learning, help each other move forward. Todo: To be replaced.

  1. Webkit Architecture and Modules (from basics to applications)

1) Operating system: including 2D/3D graphics library, network library, storage, audio and video library… 2) WebKit layer: 2.1 webCore: HTML parsing -> build DOM, CSS parsing -> build cssOM. To build the Render Object tree– > Layout –> Render Layout tree. As well as SVG, Canvas and other parsing. 2.2) jsCore: Provides interpretation and analysis of JS.

3) WebKit interface layer: provides binding of WebKit functions and corresponding interface output.

Knowing webKit’s simple layering, let’s take a look at chromium’s structural implementation. The structure level is clear, the module function is single, the flexibility is stronger, the expansibility is stronger.

  1. Chromium’s module architecture starts from the bottom up. 2.1) Basic service modules: Blink (WebKit), V8 (js processing module), GPU,UI… The purpose of content module and Content interface is to hide basic service logic functions and provide simple interface calls. 2.3) Chromiun and other browser clients organize interface calls more reasonably and efficiently, providing functionality from URL to page presentation.

That leads us to the next question, how to organize more rationally and effectively? At present, the most effective way is multi-process, multi-thread architecture model. It’s all about safety, efficiency, and speed.

  1. 3.1) Browser process: the main process of the browser, responsible for the display of the browser interface, as well as the management (and drawing) of the browser page, responsible for the creation and destruction of other processes. As well as browser TAB forward, backward, address bar, bookmark bar work and some of the browser’s invisible bottom operations, such as network requests and file access involved in the management of cache resources. There is one and only one. Main thread: UI thread: handles user events and draws the data received from the Render process. IO thread: responsible for passing data or tasks.

    3.2) Render process: render process, mainly responsible for page rendering, WebKit rendering work is mainly completed in this process. The number of render processes is not necessarily the same as the browser corresponding to the open page, there can be more, there can be embedded iframes, there may be webworker process events. Main threads: a. GUI rendering thread: responsible for rendering browser interface, parsing HTML, CSS, building DOM tree and RenderObject tree, layout and drawing, etc. B. js thread: responsible for processing Javascript script programs. C. Event-triggering thread: belongs to the browser rather than the JS engine and is used to control the event loop; D. IO thread: e. Timing trigger thread :setInterval and setTimeout event f. Asynchronous HTTP request threads

    > Event loop for browser? Those who are interested can find out for themselves.Copy the code

    3.3) GPU process: it is mainly used for image acceleration. It can be created only when GPU hardware acceleration is enabled.

    This begs the question, what is hardware acceleration? How to enable GPU hardware acceleration?

    1) What is hardware acceleration? Hardware acceleration is to take advantage of the hardware computing power of the GPU to help render pages and improve rendering speed. But hardware acceleration has its limits. Usually, unlike software rendering, where only the updated areas are computed, for GPU drawing, once an update request is made, the engine may need to redraw all the areas if there is no layering, as computing updated parts of the area may be more time consuming for the GPU. With layering, partial area updates may only be one or several layers of the page. For the GPU, only these layers need to be drawn, and then the previous layers can be merged, without the need to redraw the entire page. This not only uses the computing power of the GPU, but also reduces the cost of redrawing. Todo: More on that later; 2) How to enable GPU hardware acceleration? What objects in the RenderLayer tree can be compositing layers? A. Have CSS 3D properties or CSS perspective effect. B (translate3d, translateZ, perspective). Special Html5 elements, such as video, c. elements that use Canvas or WebGL technology D. Using the CSS Filter technology e. using the clipping Clip or Reflection property, and its descendants include a composition layer. F. There is a sibling node whose Z coordinates are smaller than its own, and this node is a composition layer.Copy the code

    Speaking of which, the display, the visibility, opacity?

    Usually: display causes backflow and redraw, and visibility redraws. If opacity is changed, it and its children will be redrawn. If it’s on the composite layer, it’s just composite.

    Synthesizer process: 3.5) Others…

    The advantages of the process model are obvious: multi-process invocation, giving full play to multi-core CPU efficiency; The Browser process is separated from the Render process to avoid the render process crash affecting the browser; Different render processes separate, do not affect each other, but also to ensure security (different processes can not randomly obtain memory data); And so on. On the downside, however, the complexity and consumption of inter-process communication increases.

    So this begs the question, how to communicate between processes? (Data exchange between processes)

    Processes communicate in the following three modes: a. Shared storage: The OS allocates an independent memory space for processes to share. The access of two processes to the shared space is mutually exclusive and mutually exclusive control is controlled by the operating system. 1) Sharing based on data structure: (can only store a specific single data structure, low level communication) 2) sharing based on storage area (fastest IPC method) (emphasis) : a ‘large’ area, with process autonomy control of data form. B. ** message passing: Data is exchanged between processes in the unit of formatted messages. Processes exchange data using the two primitives “send message” and “receive message” provided by the operating system. Message: Message header (format information such as the ID of the sending process, ID of the receiving process, Message type, and Message length) Message body: specific exchange information. Message passing can be divided into: 1) Direct communication: messages are directly attached to the message cache queue of the receiving process. 2) Indirect communication: messages are first sent to an intermediate entity (mailbox), so it is also called “mailbox communication”. For example: E-mail system c. Pipe communication: ‘pipe’ refers to a shared file used by the reading and writing process, also known as a pipe file, which is a fixed size buffer in memory. Communication through pipes can also be understood as data exchange through reading and writing files. A pipe can communicate only half duplex. Pipe access is also mutually exclusive.

    ** Communication features: Data is read and written as a stream of characters. Each time a file is written, the file reading process is blocked and can be read only when the file is full. Each time a file is read, the file writing process is blocked. The file must be fetched and the pipe becomes empty before the file can be written. Once the data is read from the pipe, it is discarded from the pipe and cannot be retrieved. ** Based on the characteristics, it can be understood that pipeline communication is more suitable for temporary, small frequency and data volume, low communication responsibility (mostly only involving two communication) communication.Copy the code

  2. The multithreaded model has learned operating systems, and we all know that a process is the smallest unit of memory allocation, and a thread is the smallest unit of computer scheduling. There can be good multithreading in a process, and the purpose of Chromium design multithreading is to more efficient regulation and maintain high responsiveness of the user interface. How do you make the user interface responsive? A. For the Browser process, ensure that the UI thread does not interfere with other time-consuming operations. B. For the render process, ensure that other operations do not get in the way of executing the render thread. Furthermore, the rendering process can be piped to take advantage of multiple cores, so that different stages of rendering can be in different threads.

To sum up, there is a tradeoff between creating a process and creating a thread.

—— to be continued —-