Web Browsers

Web Architecture and Information Management [./]
Spring 2011 — INFO 153 (CCN 42509)

Erik Wilde and Dilan Mahendran, UC Berkeley School of Information
2011-02-09

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 Erik Wilde and Dilan Mahendran: Web Browsers

Contents

Erik Wilde and Dilan 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 [9]
  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]
  3. Extended Browsers [2]

(4) What is a Web Browser?



(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 Client-side Scripting [Client-side 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


(6) Browser Usage

Browser Usage

██ Internet Explorer (46.0%)

██ Mozilla Firefox (30.7%)

██ Safari (5.9%)

██ Chrome (14.2%)

██ Opera (2.0%)

██ Mobile (4.0%)



(7) Browsers and CSS



(8) 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 [Web Foundations (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

(9) Supported URI Schemes



(10) Caching



(11) Security and Privacy



(12) Browsers and Scripting



Content Type Handling

Outline (Content Type Handling)

  1. Browser Basics [9]
  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]
  3. Extended Browsers [2]

(14) Content Types



Built-In Support

Outline (Built-In Support)

  1. Browser Basics [9]
  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]
  3. Extended Browsers [2]

(16) 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 Images on the Web [Multimedia; Images on the Web (1)] (GIF, JPEG, PNG, ICO)


(17) 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

(19) 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


(20) 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 & Web Inspector [HyperText Markup Language (HTML); Firebug & Web Inspector (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 [Chrome (1)])


Plug-Ins

(22) 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:


(23) 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 [9]
  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]
  3. Extended Browsers [2]

(25) 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


(26) 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

(28) 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


Extended Browsers

Outline (Extended Browsers)

  1. Browser Basics [9]
  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]
  3. Extended Browsers [2]

(30) Chrome

Google Chrome

(31) Accessibility Browsers



Erik Wilde and Dilan Mahendran: Web Browsers

(32) Conclusions



2011-02-09 Web Architecture and Information Management [./]
Spring 2011 — INFO 153 (CCN 42509)