1 / 24

Moving Edge-Side Includes to the Real Edge – the Clients

Moving Edge-Side Includes to the Real Edge – the Clients. Zhen Xiao AT&T Labs -- Research Joint work with Misha Rabinovich (AT&T Labs – Research), Fred Douglis (IBM T.J. Watson Research Center), Chuck Kalmanek (AT&T Labs – Research). Motivation.

gaston
Download Presentation

Moving Edge-Side Includes to the Real Edge – the Clients

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Moving Edge-Side Includes to the Real Edge – the Clients Zhen Xiao AT&T Labs -- Research Joint work with Misha Rabinovich (AT&T Labs – Research), Fred Douglis (IBM T.J. Watson Research Center), Chuck Kalmanek (AT&T Labs – Research)

  2. Motivation • Exponential growth of Web traffic on the internet. • Caching is essential for reducing network congestion and page display time. • But more and more pages contain dynamic content. • News headlines, stock quotes, time of day, etc.. • Bad for caching! Problem: how to facilitate caching for dynamic content?

  3. A Closer Look … • Dynamic pages are not all that dynamic • Most bytes are in a static page template. • Dynamic portions are a small fraction of the entire page.

  4. Fragment 1 Fragment 2 full page: 30731 bytes news headlines: 927 bytes (3%) Solution: separate cache control for each component of the page! stock quotes: 1231 bytes (4%)

  5. Edge-Side Includes (ESI) • An XML-based mark-up language proposed in W3C http://www.w3.org/TR/esi-lang • A mechanism for fragmenting a Web page into a set of components Example: <esi:include src=“http://www.att.com/news.xml” /> • Exception handling • Conditional inclusion • Separate cache control for each component • Download changed fragments only • Assemble the page at the edge servers (i.e. reverse proxies)

  6. Comparison with HTML Tags • IMG: inclusion of images only • APPLET: inclusion of Java applets • OBJECT: generic inclusion of HTML code, but • Not supported by any major browser yet • Only allows a simple inclusion

  7. AT&T Page with ESI Mark-ups http://www.att.com/index.html (Expires Feb 17, 12:30) http://www.att.com/index.html (Expires May 1, 10:30) Page template (seldom changes) Page template (seldom changes) ESI News headlines (changes a few times day) News Fragment (expires Feb 17, 15:30) <esi: include src=/news.xml /> Stock quotes (changes every minute) <esi:include src=/stocks.xml /> Stocks Fragment (Expires Feb 17, 12:30)

  8. GET /www.att.com GET /www.att.com Full page Full page GET /www.att.com GET /stocks.xml Full page stocks Akamai’s Approach for ESI-encoded Contents Example: A client fetches the AT&T entry page. Assume that only the stock quotes have changed in the cache. Origin server Edge server Browser No ESI Encoding (template, news cached) With ESI Encoding Page Assembly

  9. Bottleneck of the Last Mile • A large percentage of Internet users still rely on dial-up connections. • Network traffic & revenue analysis: 79% of consumer subscribers as of March 2002. • Jupiter Media Metrix, Aug 2001: 59% of the predicated on-line households in the US in 2006. • The speed of the last mile dominates the page display time. ESI does NOT help dial-up customers!

  10. Client-Side Includes: Addressing the Last Mile • Key idea: Assemble page components in the clients’ browsers instead of on edge servers. • Use existing technologies inside Internet Explorer • Page parsing and assembly: JavaScript • Retrieval of page components: ActiveX • No browser modifications or reconfigurations necessary. • Work well with or without a Content Distribution Network (CDN)!

  11. GET /stocks.xml GET /stocks.xml stocks stocks Comparison of Page Assembly Alternatives Edge server Origin server Browser GET /www.att.com GET /www.att.com No ESI Encoding Full page Full page Page Assembly GET /www.att.com GET /stocks.xml With ESI Full page stocks (template, news cached) (template, news cached) With CSI Page Assembly

  12. ESI versus CSI • Same markup language (ESI) • ESI: • Reduces content providers’ costs at origin server (less load and bandwidth). • CSI: • Reduces content providers’ costs at origin server (less load and bandwidth). • Reduces content providers’ costs for CDN (less bandwidth from edge to clients). • Reduces bandwidth consumption over the last mile • Reduces browser download times.

  13. Implementation (with a CDN) Edge server Origin server Browser GET /www.att.com Wrapper Typically satisfied from client’s cache (cacheable, immutable for given page) GET CSI Javascript (cacheable, same for all pages) Obtain fragments using ActiveX Obtain fragments Using HTTP

  14. Wrapper for JavaScript/ActiveX Implementations of CSI <HTML> <BODY> <SCRIPT SRC=“csi.js”></SCRIPT> <SCRIPT>run(“template.html”)</SCRIPT> </BODY> </HTML>

  15. Implementation (without a CDN) Origin server Browser GET /www.att.com Wrapper Typically satisfied from client’s cache (cacheable, immutable for given page) GET CSI Javascript (cacheable, same for all pages) Obtain fragments using ActiveX

  16. What about non-IE browsers? • No ActiveX • Small fraction of all clients • Solution: CSI/ESI • Optimize for the common case (MSIE browsers) • JavaScript redirection • Use CSI for MSIE; ESI for the rest • No performance benefit for non-IE users, but support them functionally

  17. Wrapper choosing between client and server-side page assembly <HTML> <BODY> <SCRIPT> <!-- if (!window.ActiveXObject) window.location = “/cgi-bin/esi.pl/template.html” ; // --> </SCRIPT> <SCRIPT SRC=“csi.js”></SCRIPT> <SCRIPT> <!-- run(“template.xml”) ; //--> </SCRIPT> If your browser does not support JavaScript, please click <A href=“/cgi-bin/esi.pl/template.html”>here</A> </BODY> </HTML>

  18. Performance Evaluation • Synthetic pages: random generated contents • Sizes: 20K, 60K, 100K • Template (80%) + four fragments (5% each) • AT&T page: http://www.att.com • Wall Street Journal page: http://online.wsj.com • One template, three fragments • Network Connection: 56K modem • Server: 864 MHz Pentium III, 256 MB memory, RedHat Linux 7.0, Apache 1.3. • Client: IBM T22 Thinkpad laptop, 1GHz CPU, 128MB memory, Windows 2000, Internet Explorer 6.0.

  19. Sizes of AT&T and WSJ Page with ESI encoding All numbers are in bytes

  20. nothing cached ESI processing overhead CSI script cached Template cached Download Time of Synthetic Pages Conclusion: substantial improvement in display time in the common case

  21. 25% 45% Download Time of AT&T Page

  22. 27% 38% Download Time of WSJ Page

  23. Related Work • XInclude: http://www.w3.org/TR/xinclude • Not supported by any major browser • Requires the template and fragments be valid XML pages • Server-side includes: ASP, JSP, PHP • Easy management of the Web site • No reduction in bandwidth consumption • HPP: closest to our work • Implemented as a browser plug-in • Supports loop construct • Delta-encoding

  24. Benefits of CSI • Improves user experience. • Reduces amount of content transferred over the last mile. • No browser modifications or reconfiguration. • Reduces total cost for content providers by: • Reducing bandwidth consumption of origin server. • Reducing amount of content served by CDN’s edge servers. • Extends benefits of ESI to content providers who do not use a CDN.

More Related