Get Started. It's Free
or sign up with your email address
Rocket clouds
Browser inside by Mind Map: Browser inside

1. 1. Rendering engine

1.1. Gecko

1.1.1. Firefox

1.2. Webkit

1.2.1. Chrome

1.2.2. Safari

1.3. Render process

1.3.1. Parse HTML to construct DOM tree

1.3.2. Render tree construction

1.3.2.1. Inline style and external CSS informatio

1.3.2.2. Contains rectangles with visual attr: color, dimensions etc

1.3.3. Tree layout

1.3.3.1. Calculating coordinates for elements using render tree info

1.3.4. Painting the render tree

1.3.5. Flow examples

1.3.5.1. Basic

1.3.6. Terms

1.3.6.1. Gecko

1.3.6.1.1. Frame tree

1.3.6.2. Webkit

1.3.6.2.1. Render tree

2. 2. Parsing

2.1. Parsing syntax

2.1.1. Syntax parsing trees

2.1.2. Algorithm

2.1.2.1. Lexer (correct lexems of lang)

2.1.2.2. Create syntax tree

2.1.2.3. Translate to machine code

2.1.3. Calculation of trees is based on stacks

2.2. HTML

2.2.1. DTD

2.2.2. DOM

2.2.3. Parse using < and > as stop symbols

2.2.4. Are tags and vals correct

2.2.4.1. Using regexps

2.3. CSS

2.3.1. Creates tree of accordance of selector elements and values

2.3.2. Gecko blocks script execution while CSS is being loaded

2.3.3. Webkit blocks scriptexecution only if needed CSS fragment is being downloaded

2.4. Scripts

2.4.1. The parsing of the document halts until the script was executed.

2.4.2. If the script is external then the resource must be first fetched from the network - this is also done synchronously, the parsing halts until the resource is fetched.

2.4.3. HTML5

2.4.3.1. mark script as asynchronous

2.4.4. Webkit and Gecko scan the document while running the script and find other resoucres which need data load

3. 3. Render tree construction

3.1. Webkit

3.1.1. RenderObject

3.1.1.1. createObject()

3.2. Create accordance of DOM element tree and CSS tree

3.2.1. Use tree rule

3.3. CSS cascade order

3.3.1. Browser declarations User normal declarations Author normal declarations Author important declarations User important declarations

4. Main thread is event loop

4.1. while (!mExiting) NS_ProcessNextEvent(thread);