Tools to Show Effects of Different Download Order WebTP Meeting Tools to Show Effects of Different Download Order 29 Nov, 1999. H. Wilson So UC Berkeley
WebTP Hypothesis Hypothesis: Downloading embedded objects in the order of preference increases user satisfaction.
Page Download Process User Preferences Network Conditions Parse HTML & Estimate the utility of each image Download images in order of preference Download HTML
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.
Tools Option 1: Build a toy browser that speaks WebTP directly to the server. Option 2: Modify an existing browser to speak WebTP directly Option 3: Use proxies between regular browser and either modified or unmodified server
Option 1: Build a toy browser Build a simple browser that handles only text and images. Adv: speaks WebTP => all optimizations being proposed can be implemented Disadv: cannot deal with HTML files (limited features) cannot be deployed => less convincing hard to write a browser that looks good and works well
Option 2: Modify browser to speak WebTP The only browser that comes with source code is Mozilla (derived from Netscape’s 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
Option 3: Use Proxy Have a client side proxy and/or a server side proxy; minimal or no changes on browsers HTTP/WebTP Server Netscape / I.E. HTTP over WebTP HTTP/TCP Server HTTP over TCPs Client-side Proxy HTTP over TCP HTTP over WebTP Server-side proxy
Option 3: Use Proxy Adv: Disadv: 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.)
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
Experiment Setup Desktop Netscape / I.E. Proxy (Reordering) HTTP over TCPs HTTP over TCPs Proxy (Reordering) HTTP/TCP Server
Overview Browser Proxy Browser Request HTML Download HTML Browser Parses HTML Proxy Parses HTML Extract Image References Extract Image References Classify Images User Preference Download Assign Priorities Download Display
Optimize Download Order HTML has embedded GIFs and JPEGs Each picture has a different utility or value to the viewer <HTML> <BODY> <P ALIGN="center"> <IMG SRC="/Menubars/cs.home.jpg"> </A> </P> <IMGSRC="/Images/Photos/soda.emblem.gif” WIDTH="100" HEIGHT="133"> </BODY> </HTML>
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?)
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.)
Finding Out the Role of Each Image Manual Sol’n: Page designer can explicitly tag each image: <IMG SRC=“…” ROLE=“button”…> Automatic Sol’n: Although the semantics of each image is not explicitly stated in the HTML file, the structure of the document leaves some hints.
Inferring Role of Images File extensions: JPEGs are for pictures, GIFs are for graphics URL structure of Link: http://cnn.com/event.ng/Type=click&ProfileID=1021&RunID=19077&AdID=14352&GroupID=369&FamilyID=3095&TagValues=434.435.487.1009.1696&Redirect=http:%2F%2Fadcenter.in2.com%2Fcgi-bin%2Fclick.cgi%3Ftid=15427%26cid=about-home2-468x60%26hid=cnn%26time=1999.11.18.6.25.42.0) Dimension: <IMG … WIDTH=600 HEIGHT=3 >
Inferring Role of Images IMG Tag Attribute: <IMG SRC="image/nav_top.gif" WIDTH=466 HEIGHT=24 BORDER="0" USEMAP="#nav_top”> INPUT Tag: <INPUT TYPE=image SRC="/ureg/generic/en/signin_button.gif" WIDTH=55 HEIGHT=23 BORDER=0> Others hints: ALT=“…”, location, dimension, occurrence pattern
Extract Image References Summary Download HTML Proxy Parses HTML Extract Image References Classify Images User Preference (static) Assign Priorities Download
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.
Conclusion We need a platform for trying out different optimization. Using proxies, we can try out different things with relative ease because we don’t have to deal with the front-end (i.e. the browser.)