Browser internals
1 / 22

Browser internals - PowerPoint PPT Presentation

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

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

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

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


    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’


    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


    • Gecko

    • Frame tree

    • Reflow

    • Frame constructor

    • Content sink to form DOM elements

    • WebKit

    • Render tree

    • Layout

    • Attachment

    Browser internals


    • 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


    Lexical breaking input into tokens(lexer)

    Syntax  applying syntax rules(parser)

    Browser internals


    • 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


    • 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

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

  • Login