1 / 22

Browser internals

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

norman
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Browser internals Ivan & Bastiaan

  2. Major browsers • Firefox • Chrome • Safari • IE • Opera Firefox- open source Chrome is based on Chromium which is open source Safari - partly open source

  3. Statistics

  4. Main functionality • Presentation of data(HTML documents, images etc.) • Resource location specified by URI(Uniform Resource Identifier) • W3C • Compatibility issues

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

  6. Engines Browser Engine • Handles actions between UI and Rendering Engine Rendering Engine • Parsing HTML,CSS • Displaying parsed content • Displaying requested content(PDF, Images etc.)

  7. Other main components • Networking • Using for network calls (HTTP request) • UI backend • Painting the render tree • JS interpreter • Parses and executes JS code

  8. Data storage • Persistence • Saving data on hard disk(cookies) Html 5 defines ‘web database’

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

  10. Rendering Engine Gecko - Firefox WebKit – Chrome,Safari WebKit started as engine for Linux platform and was modified by Apple to support Mac and Windows

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

  12. WebKit main flow

  13. Gecko main flow

  14. Differences • Gecko • Frame tree • Reflow • Frame constructor • Content sink to form DOM elements • WebKit • Render tree • Layout • Attachment

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

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

  17. Analysis Lexical breaking input into tokens(lexer) Syntax  applying syntax rules(parser)

  18. Analysis • Parser asks for a new token • Trying to match • Token added

  19. Compilation example • Source code will be parsed first • Translation into machine code

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

  21. Questions

  22. With thanks to TaliGarsiel & Paul Irish autors of this article: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

More Related