browser internals
Download
Skip this Video
Download Presentation
Browser internals

Loading in 2 Seconds...

play fullscreen
1 / 22

Browser internals - PowerPoint PPT Presentation


  • 108 Views
  • Uploaded on

Browser internals. Ivan & Bastiaan. Major browsers. Firefox Chrome Safari IE Opera. Firefox- open source Chrome is based on Chromium which is open source Safari - partly open source. Statistics. Main functionality. Presentation of data(HTML documents, images etc.)

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Browser internals' - norman


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
browser internals

Browser internals

Ivan & Bastiaan

slide2
Major browsers
  • Firefox
  • Chrome
  • Safari
  • IE
  • Opera

Firefox- open source

Chrome is based on Chromium which is open source

Safari - partly open source

slide4
Main functionality
  • Presentation of data(HTML documents, images etc.)
  • Resource location specified by URI(Uniform Resource Identifier)
  • W3C
  • Compatibility issues
slide5
User Interface
    • Address bar
    • Back/forward buttons
    • Home button
    • Menu
  • Every part of the browser except the main window where you see the requested page.
slide6
Engines

Browser Engine

  • Handles actions between UI and Rendering Engine

Rendering Engine

  • Parsing HTML,CSS
  • Displaying parsed content
  • Displaying requested content(PDF, Images etc.)
slide7
Other main components
  • Networking
  • Using for network calls (HTTP request)
  • UI backend
  • Painting the render tree
  • JS interpreter
  • Parses and executes JS code
slide8
Data storage
  • Persistence
  • Saving data on hard disk(cookies)

Html 5 defines ‘web database’

structure
Structure

Chrome holds multiple instances of the rendering engine - one for each tab

slide10
Rendering Engine

Gecko - Firefox

WebKit – Chrome,Safari

WebKit started as engine for Linux platform and

was modified by Apple to support Mac and Windows

slide11
The main flow
  • Content in 8K chunks

Syntax analyze of HTML  Turn the tags into DOM nodes(“content tree”)

Parsing the style data(external CSS and style tags)  Render tree

Giving each node coordinates  Painting the render tree

Rendering engine will try to display content as soon as possible

slide14
Differences
  • Gecko
  • Frame tree
  • Reflow
  • Frame constructor
  • Content sink to form DOM elements
  • WebKit
  • Render tree
  • Layout
  • Attachment
slide15
Parsing
  • Result of parsing is nodes tree
  • Example-parsing expression 2+3-1 returns this tree

Parsing a document means translating it to some structure.

slide16
Parsing rules
  • Based on syntax rules that document obeys(language or format)
  • Context free grammar
  • Syntax analysis and lexical analysis
slide17
Analysis

Lexical breaking input into tokens(lexer)

Syntax  applying syntax rules(parser)

slide18
Analysis
  • Parser asks for a new token
  • Trying to match
  • Token added
slide19
Compilation example
  • Source code will be parsed first
  • Translation into machine code
slide20
Rendering
  • Single threaded
  • Main thread is an event loop(infinite)
  • Except network operations
  • Number of parallel connections is limited(2-6 connections)

Event loop waits for events (like layout and paint events) and processes them

slide22
With thanks to TaliGarsiel & Paul Irish autors of this article:

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

ad