WebTP%20Meeting

1
WebTP Meeting

• Tools to Show Effects of Different Download Order
• 29 Nov, 1999.
• H. Wilson So
• UC Berkeley

2
WebTP Hypothesis

• HypothesisDownloading embedded objects in the
  order of preference increases user satisfaction.

3
Page Download Process
User Preferences
Network Conditions
Parse HTML Estimate the utility of each image
Download images in order of preference
Download HTML
4
Visual Proof

• Proof? We have been asserting the hypothesis and
  focusing on build a framework to allow smart
  browsers to do all kinds of optimization.
• Need Tools (probably something similar to a
  modified browser) to show the effects of the
  optimization we are proposing -- different
  download order, Application Level Framing (ALF),
  smart bandwidth schedulers, out-of-order
  delivery, eliminating handshake, etc.

5
Tools

• Option 1Build a toy browser that speaks WebTP
  directly to the server.
• Option 2Modify an existing browser to speak
  WebTP directly
• Option 3Use proxies between regular browser and
  either modified or unmodified server

6
Option 1 Build a toy browser

• Build a simple browser that handles only text and
  images.
• Adv speaks WebTP gt all optimizations being
  proposed can be implemented
• Disadv
• cannot deal with HTML files (limited features)
• cannot be deployed gt less convincing
• hard to write a browser that looks good and works
  well

7
Option 2 Modify browser to speak WebTP

• The only browser that comes with source code is
  Mozilla (derived from Netscapes source code.)
• Adv
• can implement all optimizations of WebTP (at
  least in theory)
• can display real-world pages (though still has
  lots of bugs, but better than what we can hope to
  do.)
• Disadv
• Huge source tree (time-consuming to program and
  debug)
• Not sure if fitting WebTP underneath is feasible

8
Option 3 Use Proxy

• Have a client side proxy and/or a server side
  proxy minimal or no changes on browsers

HTTP/WebTPServer
Netscape /I.E.
HTTP over WebTP
HTTP/TCP Server
HTTP over TCPs
Client-side Proxy
HTTP over TCP
HTTP over WebTP
Server-side proxy
9
Option 3 Use Proxy

• Adv
• any web page looks great!
• frees us from writing any User Interface code
• seems deployable
• Disadv
• Cannot implement all optimizations because
  clients still speak TCP (but most are.)

10
Proof of Concept

• Question Is the proxy approach feasible and
  flexible?
• Proof of concept write a proxy to affect the
  download order of pictures embedded in HTML

11
Experiment Setup
Desktop
Netscape /I.E.
HTTP over TCPs
HTTP over TCPs
Proxy(Reordering)
HTTP/TCP Server
12
Overview Browser Proxy
Download HTML
Browser Request HTML
Proxy Parses HTML
Browser Parses HTML
Extract Image References
Extract Image References
Classify Images
User Preference
Download
Assign Priorities
Download
Display
13
Optimize Download Order

• HTML has embedded GIFs and JPEGs
• Each picture has a different utility or value to
  the viewer

ltHTMLgt ltBODYgt ltP ALIGN"center"gt ltIMG
SRC"/Menubars/cs.home.jpg"gt lt/Agt lt/Pgt ltP
ALIGN"center"gt ltIMGSRC"/Images/Photos/soda.emble
m.gif WIDTH"100" HEIGHT"133"gt lt/Pgt lt/BODYgt lt/
HTMLgt
14
Download order?

• Proxy has to determine the order in which
  embedded objects are downloaded.
• Can we find out the relative value of each image
  embedded in an HTML file?(Can we automate this?)

15
Utility of an Embedded Image

• Different images serve different roles in a web
  document
• Navigation menus
• Pretty buttons
• Thumbnails for large images
• Decoration
• Advertisements (banners etc.)

16
Finding Out the Role of Each Image

• Manual Soln Page designer can explicitly tag
  each image ltIMG SRC ROLEbuttongt
• Automatic Soln Although the semantics of each
  image is not explicitly stated in the HTML file,
  the structure of the document leaves some hints.

17
Inferring Role of Images

• File extensions JPEGs are for pictures, GIFs
  are for graphics
• URL structure of Link http//cnn.com/event.ng/Ty
  peclickProfileID1021RunID19077AdID14352Gro
  upID369FamilyID3095TagValues434.435.487.1009.
  1696Redirecthttp2F2Fadcenter.in2.com2Fcgi-bi
  n2Fclick.cgi3Ftid1542726cidabout-home2-468x60
  26hidcnn26time1999.11.18.6.25.42.0)
• Dimension ltIMG WIDTH600 HEIGHT3 gt

18
Inferring Role of Images

• IMG Tag AttributeltIMG SRC"image/nav_top.gif"
  WIDTH466 HEIGHT24 BORDER"0" USEMAP"nav_topgt
• INPUT TagltINPUT TYPEimage SRC"/ureg/generic/en
  /signin_button.gif" WIDTH55 HEIGHT23 BORDER0gt
• Others hintsALT, location, dimension,
  occurrence pattern

19
Summary
Download HTML
Proxy Parses HTML
Extract Image References
Classify Images
User Preference(static)
Assign Priorities
Download
20
Demo

• Proof of concept It is possible to reorder
  object download order w/o changing browser
• Browser opens one connection per image to the
  proxy reordering is transparent.
• Reality must hack browser to open more than 4
  connections.

21
Conclusion

• We need a platform for trying out different
  optimization.
• Using proxies, we can try out different things
  with relative ease because we dont have to deal
  with the front-end (i.e. the browser.)