1)Trident Rendering engine -> old IE series 2)Edge rendering engine -> IE in Win10 3)Gecko Rendering engine -> Mozilla Firefox 4)Presto Rendering engine -> Opera 5)KHTML rendering engine -> Early Safafi and Google Chrome 6)Webkit rendering engine -> Safari and Chrome after 2001 and some browsers in China 7)Blink Rendering engine -> New version of Chromium Browser Google project

To provide you with two common development query sites:

The browser’s html5 support

Is different from Can I use

The reader should not worry too much about the order of the graph, which may be out of order at some point.

Let’s take a look at how the HTML interpreter works



Bytes > Characters > Tokens > Nodes > DOM tree

First byte streams, then character streams after decoding, then Tokens are interpreted as words through a lexical analyzer, then nodes are built through the parser, and finally these nodes are built into a DOM tree. Lexical analysis: HTMLTokenizer (lexical analysis, similar to a state machine), input is a string, output is a word. XSSAuditor: XSSAuditor (Token Stream) XSS refers to Cross Site Security, mainly for Security reasons. Word to Node: WebKit is used to build DOM nodes. This is done by the HTMLDocumentParser class calling the constructTree function of the HTMLTreeBuilder class. Node to DOM tree: The element nodes in the tree create attribute nodes and so on is done by the HTMLConstructionSite class, which contains an HTMLElementStack as a stack to hold element nodes. JavaScript execution: WebKit assigns the JavaScript code that needs to be executed during DOM tree creation to HTMLScriptRunner class. DOM event mechanism: webkit uses EventTarget class to represent the EventTarget defined in the Events part of the DOM specification. Node Node inherits from EventTarget class, so Node has the EventTarget class related methods.

The ShadowRoot interface of the Shadow DOM API is the root node of a DOM subtree that is rendered separately from the main DOM tree of the document. MDN- Shadow node

Let’s look at how CSS works with DOM to present a page.



The CSS interpreter and rule matching occur after the DOM tree is created, and before the RenderObject tree is created, the results interpreted by the CSS interpreter are stored, and the RenderObject tree uses the results to perform specification matching and layout calculations.

DocumentStyleSheetCollection class (as part of the Document), the class contains all CSS stylesheets, includes its CSSStyleSheet internal representation of the class, it contains the CSS href, types, content and other information. CSS interpretation process: The process by which CSS strings are processed by the CSS interpreter into internal rules for the rendering engine, using the CSSParser class. Before explaining the custom CSS styles in a web page, the WebKit rendering engine actually sets a default style for each web page, which is the root of why we reset the browser style. Rule matching: The StyleResolver class matches styles for element nodes in the DOM. The StyleResolver class looks for the most matching rule from the style rules based on element information, such as tag names, categories, and so on, and saves the style information into a new RenderStyle object. Finally, these RenderStyle objects are managed and used by the RenderObject class. Among them, the matching of rules is calculated and obtained by ElementRuleCollector CLASS. It obtains the rule set from DocumentRuleSets according to the attribute information of elements and other information, and then matches the style of elements according to ID, CLASS, tag and other selector information successively. Webkit then sorts the rules, and for the style attributes needed for the element, WebKit selects from the higher-priority rule and returns the style attribute value. On a less relevant note, I introduced the Block Formatting Context (BFC), which is the part of a Web page that is visually rendered in CSS. It is the area where block-level box layout occurs and where floating elements interact with other elements. For those of you who are not familiar, please asynchronous MDN-BFC

We talk about reflow and repaint. Reflow will degrade performance due to changes in geometry properties of elements (transform, opacity and other properties do not cause reflow). Why does the extension say that the Transform implementation animation performs better than setting geometry properties directly? 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 happens here) -> Paint (repaint happens here) -> Composite (transform happens here) This is the fundamental reason why repaint must occur when reflow occurs. Explains the Animation performance of transform from the perspective of redrawing and rearranging

A RenderObject holds all the information needed to draw DOM nodes, such as style layout information, and after being processed by WebKit, the RenderObject knows how to draw itself.

The following situation causes a DOM tree node to create a RenderObject (DOM and RenderObject are not one-to-one correspondence).

1. Document node of DOM tree.

2.DOM tree visual nodes, such as HTML, body, div, etc. Webkit does not create RenderObject nodes for non-visual nodes, such as meta and Script.

3. In some cases, WebKit needs to create anonymous RenderObject nodes, which do not correspond to any nodes of DOM tree, but are required by WebKit processing. Typical examples are anonymous RenderBlock nodes.

When HTML constructs a page structure, WebKit introduces a hierarchical structure to improve web page performance.

Webkit creates RenderLayer objects for each layer of the page. When certain types of RenderObject nodes or CSS style RenderObject nodes appear, WebKit creates RenderLayer objects for those nodes.

The RenderLayer tree is a new tree based on the RenderObject tree. RenderLayer nodes and RenderObject nodes do not have a one-to-one relationship, but a one-to-many relationship.

When does a RenderObject node need to create a new RenderLayer node?

1. The Document node of the DOM tree corresponds to the RenderView node.

2. The child node of the Document in the DOM tree, that is, the HTML node corresponding to the RenderBlock node.

3. Explicitly specify the RenderObject node for the CSS location.

4. RenderObject nodes with transparent effects.

5. RenderObject nodes with overflow, alpha, or reflection effects.

6. RenderObject nodes using Canvas 2D and 3D (WebGL) technology.

7. RenderObject corresponding to the Video node.

Webkit uses software rendering techniques to render pages when hardware accelerated content is not required (including but not limited to CSS3 3D transformations, CSS3 3D transformations, WebGL, and video). For each RenderObject object, there are three stages to draw itself: the first stage is to draw the backgrounds and borders of all blocks in the layer. The second stage is to draw the floating content. The third stage is Foreground, that is, the content part, outline, font color, size, etc. (the background and border of embedded elements occur at this stage).

Canvas development, can decompose the canvas into smaller canvas, so when updating only need to update the small canvas to reduce overhead. Css3 3D deform technology, which allows the browser to animate all the layers by just using a synthesizer (Composite instead of Style -> Layout(reflow happens here) -> Paint).

This includes 3D morphing and animation. Webkit creates a new layer for processing to improve performance.

In JS, the basic data types are Boolean, Number, String, Null, Undefined, Symbol, and other data are objects.

Handle: A Handle class that manages basic data and objects for garbage collector manipulation.

There are two main types, a Local class (inherited from Handle) that represents data on the Local stack and is therefore lightweight.

The other is the Persistent class (inherited from the Handle class) that represents data and object access between functions.

For shaping data, Handle itself stores it for fast access.

Other data is stored in memory from the heap, and other data types are stored in the heap due to the size and length of Handle, etc.

V8’s Deferred feature: Much of the compilation of javascript code does not occur until it is called at runtime, reducing the time overhead.

Machine language (it is the only language that a computer can execute directly. The machine instructions of an electronic computer are a list of binary digits.) Assembly language Assembly instructions are written in an easy-to-remember format for machine instructions, but they need to be translated into machine language by a compiler so that the machine can execute them.

NPAPI is the most popular plug-in architecture today, almost all browsers support, but there are great security risks, plug-ins can steal system low-level permissions, launched malicious attacks.

View the current installed Extensions of Chrome at the following url ://extensions/

WebRTC implements web-based video conferencing under the WHATWG protocol, which aims to provide real-time Communications (RTC) capabilities with simple javascript in a browser. MDN – the most important methods: WebRTC navigator. MediaDevices. GetUserMedia (constraints) and Video, Audio, etc.

Basic security model: Same Origin Policy XMLHttpRequest, cookie reading and writing, DOM object operation, etc. XSS (Cross Site Scripting) executes cross-domain JS script code. Developers can avoid this by converting user input data to characters. Webkit helps us filter through the XSSAuditor object (enabled by default). Content-security-policy (CSP) HTTP header field. A Content Security Policy (CSP) is used to detect and mitigate specific types of attacks used on Web sites, such as XSS and data injection. The Cross Origin Resource Sharing (CORS) standard adds a new set of HTTP header fields that allow servers to declare which source sites have access to which resources. Specific server code Settings

// Request header(' access-Control-allow-origin: http://arunranga.com'); // header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); header('Access-Control-Allow-Headers: X-PINGARUNER'); Access-control-allow-origin, access-control-allow-credentials, access-control-allow-headers, Access-control-expose-headers, access-Control-allow-methods, access-Control-max-ageCopy the code

Cross Document Messaging communicates via window.postMessage and message events. HTTPS (Secure Transport Protocol) SPDY (pronounced “SPeeDY”) is a TCP-based application layer protocol developed by Google to minimize network latency, improve network speed, and optimize users’ network experience. The core idea of SPDY is multiplexing. Quick UDP Internet Connection (QUIC) is an Internet transport layer protocol with low latency based on UDP developed by Google.

Browser sandbox model is to use the security technology provided by the system, so that the web page in the execution process will not modify the operating system or access the private data in the system, but need to access the system resources or system call, through a proxy mechanism to complete.