Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

Browser inside by Mind Map: Browser inside
0.0 stars - reviews range from 0 to 5

Browser inside

1. Rendering engine

Gecko

Firefox

Webkit

Chrome

Safari

Render process

Parse HTML to construct DOM tree

Render tree construction, Inline style and external CSS informatio, Contains rectangles with visual attr: color, dimensions etc

Tree layout, Calculating coordinates for elements using render tree info

Painting the render tree

Flow examples, Basic

Terms, Gecko, Frame tree, Each element is a 'frame', Webkit, Render tree

2. Parsing

Parsing syntax

Syntax parsing trees

Algorithm, Lexer (correct lexems of lang), Create syntax tree, Translate to machine code

Calculation of trees is based on stacks

HTML

DTD

DOM

Parse using < and > as stop symbols

Are tags and vals correct, Using regexps

CSS

Creates tree of accordance of selector elements and values

Gecko blocks script execution while CSS is being loaded

Webkit blocks scriptexecution only if needed CSS fragment is being downloaded

Scripts

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

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.

HTML5, mark script as asynchronous

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

3. Render tree construction

Webkit

RenderObject, createObject()

Create accordance of DOM element tree and CSS tree

Use tree rule

CSS cascade order

Browser declarations User normal declarations Author normal declarations Author important declarations User important declarations

Main thread is event loop

while (!mExiting) NS_ProcessNextEvent(thread);