Architectureof the Web browser                        Dr. Sabin Buraga    Faculty of Computer Science, UAIC, Romania      ...
Firefox   Chrome                  MSIE      OperaWhy we should knowthe general architectureof a Web browser?
user interface                                                  data persistence          browser engine          renderin...
user interface                         address bar                 back/forward button                  bookmarking menu  ...
browser engine         “bridge” between user interface (UI)                       and rendering engine
browser engine         “bridge” between user interface (UI)                       and rendering engine                    ...
rendering engine            able to render the content available      of the Web – representations of resources           ...
rendering engine            able to render the content available      of the Web – representations of resources           ...
rendering engine                 includes an interpreter (parser)    depending on the Web document type – DTD   HTML 4   X...
rendering engine                                                    HTML source            HTML                           ...
rendering engine                    DOM tree                                               render tree
rendering engine                                render tree                                                      visual r...
rendering engine                                    render tree                                                          ...
rendering engine                     layout                                            painting
rendering engine                                               layout                                                    ...
rendering engine                                     examples:                                Gecko (Firefox)             ...
rendering workflow – the Gecko use-case        https://developer.mozilla.org/en/Gecko
rendering workflow – WebKit                              www.webkit.org
rendering engine                                                                       because – usually – CSS styles    ...
rendering engine                                                    the processing is made in a synchronous manner   Java...
rendering engine                                                implicitly, the rendering process is stopped    until the...
rendering engine                                                 the rendering process could be optimized                ...
networking             used to access & transfer data             (representations of resources)                   availab...
networking                 used to access & transfer data                 (representations of resources)                  ...
display (UI) backend       able to display common UI components          (windows, radio buttons,text controls,…)         ...
JavaScript interpreter                          interpreting & executing                              JavaScript programs ...
data persistence          storing data on the client machine
data persistence          storing data on the client machine                                       cookies                ...
Architectureof the Web browser                     
Architecture of the Web browser
Upcoming SlideShare
Loading in …5
×

Architecture of the Web browser

18,987 views

Published on

A presentation depicting the most important aspects regarding the internal architecture of a Web browser.

Published in: Technology

Architecture of the Web browser

  1. 1. Architectureof the Web browser Dr. Sabin Buraga Faculty of Computer Science, UAIC, Romania www.purl.org/net/busaco
  2. 2. Firefox Chrome MSIE OperaWhy we should knowthe general architectureof a Web browser?
  3. 3. user interface data persistence browser engine rendering engine net JS XML inter- display backend work preter parserwww.html5rocks.com/en/tutorials/internals/howbrowserswork/
  4. 4. user interface address bar back/forward button bookmarking menu …
  5. 5. browser engine “bridge” between user interface (UI) and rendering engine
  6. 6. browser engine “bridge” between user interface (UI) and rendering engine kernel plug-ins extensions add-ons
  7. 7. rendering engine able to render the content available of the Web – representations of resources (e.g., HTML documents)
  8. 8. rendering engine able to render the content available of the Web – representations of resources (e.g., HTML documents) processing the DOM tree corresponding to a Web page by applying the CSS style properties in order to render information within a display area – viewport
  9. 9. rendering engine includes an interpreter (parser) depending on the Web document type – DTD HTML 4 XHTML HTML 5 www.quirksmode.org
  10. 10. rendering engine HTML source HTML (stored in a text file – on server) Html  Element DOM tree HTML HTML (in RAM, on client side) Body Head Element Element HTML HTML Paragraph Title Element Element Text www.w3.org/DOM/
  11. 11. rendering engine DOM tree  render tree
  12. 12. rendering engine render tree  visual representation – layout
  13. 13. rendering engine render tree  visual representation – layout computing the width of each content block (width calculation) decisions regarding line breaking …and others
  14. 14. rendering engine layout  painting
  15. 15. rendering engine layout  painting after painting, rendering changes could (locally or globally) occur  re-layout and/or re-paint
  16. 16. rendering engine examples: Gecko (Firefox) Presto (Opera) Trident (MSIE) WebKit (Chrome, Safari, iOS) Gecko WebKit Trident Presto
  17. 17. rendering workflow – the Gecko use-case https://developer.mozilla.org/en/Gecko
  18. 18. rendering workflow – WebKit www.webkit.org
  19. 19. rendering engine  because – usually – CSS styles do not modify the DOM tree, the rendering process is not dependent by the loading of CSS files
  20. 20. rendering engine  the processing is made in a synchronous manner JavaScript programs must be executed immediately when the engine spots the JS source-code (eventually, loaded from an external URL)
  21. 21. rendering engine  implicitly, the rendering process is stopped until the JavaScript code is entirely executed
  22. 22. rendering engine  the rendering process could be optimized speculative parsing parallel loading of resources multi-processing …
  23. 23. networking used to access & transfer data (representations of resources) available on the Internet HTTP HTTPS SPDY
  24. 24. networking used to access & transfer data (representations of resources) available on the Internet limited number of parallel connections (usually, 2—6)
  25. 25. display (UI) backend able to display common UI components (windows, radio buttons,text controls,…) browsershots.org/
  26. 26. JavaScript interpreter interpreting & executing JavaScript programs on the client sideCarakan (Opera)Chakra (Microsoft)Nitro, JavaScriptCore (Apple)SpiderMonkey, IonMonkey, Rhino (Mozilla)V8 (Google)
  27. 27. data persistence storing data on the client machine
  28. 28. data persistence storing data on the client machine cookies localStorage – HTML5 cache …
  29. 29. Architectureof the Web browser 

×