Rendering Engine

parsing.md

Overview

Parsing a document means translating it to a structure the code can use. The result of parsing is usually a tree of nodes that represent the structure of the document. This is called a parse tree or a syntax tree.

Grammars

Parsing is based on the syntax rules the document obeys: the language or format it was written in. Every format you can parse must have deterministic grammar consisting of vocabulary and syntax rules.

Parser–Lexer combination

Parsing can be separated into two sub processes: lexical analysis and syntax analysis.

Lexical analysis is the process of breaking the input into tokens

Tokens are the language vacabulary: the collection of valid building blocks.

The lexer is also called tokenizer, which is responsible for breaking the input into valid tokens. The lexer knows how to strip irrelevant charactoers like white spaces and line breaks.

rendering-engine.md

Overview

rendering engine's job is to render requested content to browser screen. Rendering engine will always tries to display content ASAP.

rendering engines

• IE: Trident
• Firefox: Gecko
• Safari: WebKit
• Chrome & Opera (from version 15): Blink (a fork of WebKit)

Basic rendering flow

Parse HTML to construct DOM tree => construct Rendering Tree => Layout of the rendering Tree => Painting of the rendering Tree

DOM Tree

convert into JavaScript representations

Rendering Tree

Styling information together with visual instructions in the HTML will be used to create another this Rendering Tree.

Layout

Giving Nodes the coordinates

Painting

The render tree will be travered and each node will be painted using the Browser's UI component