Browser internals
This presentation is the property of its rightful owner.
Sponsored Links
1 / 22

Browser internals PowerPoint PPT Presentation


  • 79 Views
  • Uploaded on
  • Presentation posted in: General

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.)

Download Presentation

Browser internals

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


Browser internals

Major browsers

  • Firefox

  • Chrome

  • Safari

  • IE

  • Opera

Firefox- open source

Chrome is based on Chromium which is open source

Safari - partly open source


Statistics

Statistics


Browser internals

Main functionality

  • Presentation of data(HTML documents, images etc.)

  • Resource location specified by URI(Uniform Resource Identifier)

  • W3C

  • Compatibility issues


Browser internals

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.


  • Browser internals

    Engines

    Browser Engine

    • Handles actions between UI and Rendering Engine

    Rendering Engine

    • Parsing HTML,CSS

    • Displaying parsed content

    • Displaying requested content(PDF, Images etc.)


    Browser internals

    Other main components

    • Networking

    • Using for network calls (HTTP request)

    • UI backend

    • Painting the render tree

    • JS interpreter

    • Parses and executes JS code


    Browser internals

    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


    Browser internals

    Rendering Engine

    Gecko - Firefox

    WebKit – Chrome,Safari

    WebKit started as engine for Linux platform and

    was modified by Apple to support Mac and Windows


    Browser internals

    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


    Browser internals

    WebKit main flow


    Browser internals

    Gecko main flow


    Browser internals

    Differences

    • Gecko

    • Frame tree

    • Reflow

    • Frame constructor

    • Content sink to form DOM elements

    • WebKit

    • Render tree

    • Layout

    • Attachment


    Browser internals

    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.


    Browser internals

    Parsing rules

    • Based on syntax rules that document obeys(language or format)

    • Context free grammar

    • Syntax analysis and lexical analysis


    Browser internals

    Analysis

    Lexical breaking input into tokens(lexer)

    Syntax  applying syntax rules(parser)


    Browser internals

    Analysis

    • Parser asks for a new token

    • Trying to match

    • Token added


    Browser internals

    Compilation example

    • Source code will be parsed first

    • Translation into machine code


    Browser internals

    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


    Browser internals

    Questions


    Browser internals

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

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


  • Login