Web Browsers

Web Architecture [./]
Fall 2011 — INFO 253 (CCN 42598)

Dilan Mahendran, UC Berkeley School of Information
2011-09-01

Creative Commons License [http://creativecommons.org/licenses/by/3.0/]

This work is licensed under a CC
Attribution 3.0 Unported License
[http://creativecommons.org/licenses/by/3.0/]

Contents D. Mahendran: Web Browsers

Contents

D. Mahendran: Web Browsers

(2) Abstract

This lecture looks at Web browsers and how they work. It introduces the basic functionalities of a browser; retrieval and rendering of Web pages. Any modern browser needs to support more than just HTTP and HTML; it must support CSS for stylesheets, JavaScript for scripted Web pages, various image formats, and popular applications such as Flash. In addition, browsers can support additional functionality such as off-line operation, or in general more application-oriented features such as AIR or Silverlight.



Browser Basics

Outline (Browser Basics)

  1. Browser Basics [10]
  2. Content Type Handling [10]
    1. Built-In Support [2]
    2. Add-Ons [2]
    3. Plug-Ins [2]
    4. External Viewers [2]
    5. Others [1]
Browser Basics D. Mahendran: Web Browsers

(4) What is a Web Browser?



Browser Basics D. Mahendran: Web Browsers

(5) One Minute in the Life of a Browser

  1. Analyze URI and connect to server to retrieve resource
    • recursively repeat until all required resources are retrieved
  2. Analyze HTML, correct errors, and compute a DOM tree
    • DOM is a memory representation of the HTML markup
  3. Apply CSS and compute the layout of the styled DOM tree
    • compute CSS decorated DOM and apply formatting algorithm to it
  4. Start executing Scripting [Scripting] code and change the DOM as required
    • scripting may have initial phase and user interaction phase
  5. Continue executing scripting code in response to user interactions
    • for many dynamic Web pages, this is a continuous activity
  6. If the user clicks on a link, start all over again


Browser Basics D. Mahendran: Web Browsers

(6) Browsers, Apps, Operating Systems



Browser Basics D. Mahendran: Web Browsers

(7) Browser Usage (Fall 2009)

Browser Usage

██ Internet Explorer (69.80%)

██ Mozilla Firefox (20.66%)

██ Safari (7.18%)

██ Chrome (0.87%)

██ Opera (0.72%)

██ Netscape (0.52%)

██ Other (0.25%)



Browser Basics D. Mahendran: Web Browsers

(8) Browsers and CSS



Browser Basics D. Mahendran: Web Browsers

(9) Browsers and the Internet

Before retrieving the Web page http://www.berkeley.edu/ [http://www.berkeley.edu/], the browser first has to find out the IP [Internet Architecture; Internet Protocol (IP) (1)]address of the www.berkeley.edu server. Using this address, it can then open an HTTP [URIs & HTTP; Hypertext Transfer Protocol (HTTP) (1)] connection. The lookup service used by the browser is the Domain Name System (DNS) [Internet Architecture; Domain Name System (DNS) (1)].

browser-dns-http.png

Browser Basics D. Mahendran: Web Browsers

(10) Supported URI Schemes



Browser Basics D. Mahendran: Web Browsers

(11) Caching



Browser Basics D. Mahendran: Web Browsers

(12) Security and Privacy



Browser Basics D. Mahendran: Web Browsers

(13) Browsers and Scripting



Content Type Handling

Outline (Content Type Handling)

  1. Browser Basics [10]
  2. Content Type Handling [10]
    1. Built-In Support [2]
    2. Add-Ons [2]
    3. Plug-Ins [2]
    4. External Viewers [2]
    5. Others [1]
Content Type Handling D. Mahendran: Web Browsers

(15) Content Types



Built-In Support

Outline (Built-In Support)

  1. Browser Basics [10]
  2. Content Type Handling [10]
    1. Built-In Support [2]
    2. Add-Ons [2]
    3. Plug-Ins [2]
    4. External Viewers [2]
    5. Others [1]
Built-In Support D. Mahendran: Web Browsers

(17) Built into the Browser

  • The Web is built on few universal media types
  • Variety on the Web is achieved through two major factors:
    1. the established media types are not application-specific
    2. advanced content can be based on browser-based runtime environments
  • Examples of built-in media types:
    • HTML+CSS for rendering formatted Web pages
    • popular image formats (GIF, JPEG, PNG, ICO)


Built-In Support D. Mahendran: Web Browsers

(18) Advantages/Disadvantages

  • Advantages of built-in media types:
    • fast and seamless rendering
    • should be supported by any browser (safe choice for developers)
  • Disadvantages of built-in media types:
    • cannot be added by users (not extensible)
    • browser must be upgraded to add new types


Add-Ons

Outline (Add-Ons)

  1. Browser Basics [10]
  2. Content Type Handling [10]
    1. Built-In Support [2]
    2. Add-Ons [2]
    3. Plug-Ins [2]
    4. External Viewers [2]
    5. Others [1]
Add-Ons D. Mahendran: Web Browsers

(20) Browser-Specific Additions

  • Supported by the browser itself (built into the browser framework)
  • Usually support additional functionality and not new media types
  • Add-ons are productivity enhancements for users
  • Examples of add-ons:
    • Minimap Sidebar [https://addons.mozilla.org/en-US/firefox/addon/5203] for better support for geolocation data
    • Operator [https://addons.mozilla.org/en-US/firefox/addon/4106] for visualizing a Web page's metadata


Add-Ons D. Mahendran: Web Browsers

(21) Advantages/Disadvantages

  • Advantages of add-ons:
    • only browser-dependent (i.e., not OS dependent)
    • can be installed individually and specific for users
    • allow browser specific behavior (e.g., Firebug [Hypertext Markup Language (HTML); Firebug (1)] for Firefox debugging)
  • Disadvantages of add-ons:
    • cannot be used across browsers
    • conflicts between add-ons can lead to instabilities
    • Web applications cannot count on them being available (e.g., Google Gears [http://gears.google.com/] and Chrome)


Plug-Ins

Outline (Plug-Ins)

  1. Browser Basics [10]
  2. Content Type Handling [10]
    1. Built-In Support [2]
    2. Add-Ons [2]
    3. Plug-Ins [2]
    4. External Viewers [2]
    5. Others [1]
Plug-Ins D. Mahendran: Web Browsers

(23) Platform Code in the Browser

  • Platform-specific code running inside the browser
    • window created by an object with given window dimensions
    • the window displays whatever the plug-in code generates as display
  • Examples of plug-ins:


Plug-Ins D. Mahendran: Web Browsers

(24) Advantages/Disadvantages

  • Advantages of plug-ins:
    • high performance (OS-specific code)
    • reasonably easy to implement if OS specific code already exists
  • Disadvantages of plug-ins:
    • hard to implement for a new OS (needs OS-specific code)
    • no easy fallback if not supported by a browser
    • plug-in internals are invisible to the browser


External Viewers

Outline (External Viewers)

  1. Browser Basics [10]
  2. Content Type Handling [10]
    1. Built-In Support [2]
    2. Add-Ons [2]
    3. Plug-Ins [2]
    4. External Viewers [2]
    5. Others [1]
External Viewers D. Mahendran: Web Browsers

(26) Browser and Applications

  • Applications often are not integrated with a browser
    • designed as standalone applications
    • capable of handling certain media types
    • registered with the OS and/or with a browser
  • External applications can do anything they like with a resource
    • the browser downloads the resource to a temporary file
    • the external viewer is started and handed the file's location
  • Examples of external viewers:
    • Office Suites [http://en.wikipedia.org/wiki/Office_suite] for handling documents, spreadsheets, and presentations
    • Adobe Reader [http://get.adobe.com/reader/] for rendering PDF documents
    • Google Earth [http://earth.google.com/] for handling KML files


External Viewers D. Mahendran: Web Browsers

(27) Advantages/Disadvantages

  • Advantages of external viewers:
    • almost no integration effort with a browser (just registering)
    • sophisticated and highly optimized applications
    • can be taken offline and used for non-Web activities
  • Disadvantages of external viewers:
    • high dependency on platform and configuration of a user's browser
    • completely breaks the workflow of working with a browser


Others

Others D. Mahendran: Web Browsers

(29) Greasemonkey

  • Greasemonkey is an add-on [Add-Ons (1)] for add-ons
  • Runtime environment for user scripts [http://userscripts.org/]
    • specifically addressing a Web page or a Web site
    • locally changing the Web page (in the browser)
    • support for changing a Web site's display according to my user needs
  • User scripts analyze/extract/update a Web page
    • when Web pages are redesigned, user scripts often break
    • a fragile way of repurposing the information from a Web site


D. Mahendran: Web Browsers

(30) Conclusions



2011-09-01 Web Architecture [./]
Fall 2011 — INFO 253 (CCN 42598)