Browsers Main Functionality

• Browsers main job is to request the web resource you want from a server and then display it for you.
• Browsers display HTMl and CSS based off the specification set by W3C Organization.
• In the past Browsers loosely followed the specification and developed their own features, nowadays Browsers more or less conform to these specifications, reducing cross-browser compatibility issues.

Browser High Level Architecture

1. User Interface: everything in the browser apart from the window is UI for the browser.
2. Browser Engine: mediates action between UI and Rendering Engine.
3. Rendering Engine: responsible for displaying requested content.
4. Networking
5. UI Backend: ???
6. JavaScript Interpreter
7. Data Storage: a persistence layer, Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem.

• Browsers also run multiple instances of the rendering engine, one per tab so each tab runs on a separate process.

Rendering Engine

• Different browsers use different rendering engines, Chrome uses the Blink rendering engine, which is a fork of Webkit which Safari uses.

Main Flow

1. Rendering Engine will get the requested documents from the Networking Layer, usually done in 8Kb chunks
2. Rendering Engine parses HTML and converts the elements into a DOM nodes that will be part of the 'Content Tree'
3. Rendering Engine will parse style data from both inline and external CSS.
4. Information parsed from HTML (Content Tree) and CSS (Style Rules) will be used to generate the 'Render Tree'
5. After Render Tree is constructed browser implements 'Layout Process' which gives each DOM node its coordinates on the screen.
6. Then render tree is traversed and each node is painted to the screen using UI Backend Layer, this is the Painting Process

• This process is gradual and the Rendering Engine will try to display content asap, it will continually build the Render Tree as more content comes from the Networking Layer.

Parsing General - Parsing: translating a document to structure that code can use which is usually a tree of nodes called a parse tree or syntax tree.

Grammars - Parsing is based on the syntax rules of the document (its format) and must have Context Free Grammar - Context Free Grammar (???): is deterministic grammar consisting of vocabulary and syntax rules ??? why is human language not context free grammar

Parser-Lexer Combination - Parsing can be separated into two sub-processes: 1. Lexical Analysis - Lexical Analysis consists of breaking down input into token, where token are the language vocabulary. 2. Syntax Analysis - Syntax Analysis is applying the language syntax rules - Parses usually distribute work between the Lexer and the Parser - Lexer breaks input into valid tokens - Parser constructs the parse tree by analyzing document structure according the language syntax rules - Parsing process is iterative 1. Asks lever for a new token and try to match that to a syntax rule 2. a) If rule is matched Parser adds node to parse tree 2. b) If rule is not matched Parser stores token and asks for a new token until a rule matching all currently held tokens as a whole (I think this this is the correct way to interpret this ???), if no rule is found an exception is raised

Translation - Parsing is often used in Translation, which is transforming input document to another format

Example
- When the compiler compiles source code into machine code it first parses it into a parse tree and translates the tree into a machine code document

Parsing Example Vocabulary: Integers, +, - Syntax 1. Expressions, terms, and operations are building blocks 2. Any number of expressions 3. An Expression is a term followed by an operation followed by another term 4. An Operation is + or - 5. A Term is an Integer or an Expression

2 + 3 - 1
	1. 2 is a term
	2. 2 + 3 is a term (has to be a term because expressions don’t take expressions)
	3. 2 + 3 - 1 is an expression/term

- Vocabulary is usually expressed by RegEx
- Syntax is usually defined in a format called BNF
	Example
	expression := term operation term
	operation := + | -
	term: Int | expression
- Context Free Grammar can also be seen as a grammar than can be expressed	entirely in BNF (https://en.wikipedia.org/wiki/Context-free_grammar)

Types of Parsers Top Down Parsers - Examines high level structure of the syntax and tries find a rule to match

Bottom Up Parsers
	- Shift reduce parser

Generating Parsers Automatically - Webkit uses Flex as a lexer, which takes file with RegEx of the tokens, and Bison as a parser, which takes BNF

HTML Parser - Parses HTML markup into a parse tree - Vocabulary and Syntax of HTML are defined in W3C - HTML uses HTML-DTD (Document Type Definition) instead of Context Free Grammar and so conventional parsers do not apply to HTML - This is because HTML is more forgiving, letting you omit certain tags (which are added implicitly)

HTML DTD - DTD is a format contains definitions for all allowed aliments, their attributes, and hierarchy - DTD has a strict mode that conforms to specifications, and other modes that support past markup to support backwards compatibility

DOM - Parse Tree is a tree of DOM element and attribute nodes - DOM is the object presentation of the HTML document and interface - Root is the Document Object - DOM is specified by the W3C