Web Caching Techniques & Web Caching Techniques & Response Time Optimization in Response Time Optimization in Application with Web BrowserApplication with Web Browser

Presented by:

Pankaj Solanki 08305054

Guided by:

Prof. D.B. Phatak

M.Tech. Seminar

Presentation on

OutlineOutline IntroductionIntroduction Objective & IssuesObjective & Issues What is Web CachingWhat is Web Caching SQUID & Optimization on SQUIDSQUID & Optimization on SQUID Recent Developments in Proxy CachingRecent Developments in Proxy Caching AJaX & Some approaches based on AJaXAJaX & Some approaches based on AJaX Available AJaX FrameworksAvailable AJaX Frameworks AJaX Vs FlashAJaX Vs Flash Some ExperimentsSome Experiments ConclusionConclusionReferencesReferences

IntroductionIntroduction

What is Web applicationWhat is Web application

Advantages of using web applicationAdvantages of using web application

update and maintain web applications without distributing and installing software

support standard browser features regardless of the OS

Introduction Introduction (continued…)(continued…)

Large no. of applications making the web performance bottleneck.

Solution Web caching can be used.

Implementing efficient applications.

Objective & IssuesObjective & Issues

Web caching caches only static content

Efficiently dealing dynamic content with Ajax

Web caching together with Ajax

achieves following benefits. Reducing the bandwidth requirements, Reducing the response time, Making web applications more interactive.

Objective & Issues Objective & Issues (continued…)(continued…)

changes in existing web applications required

many technologies for both client side and server side required.

What is Web CachingWhat is Web Caching

Caching of web documents (e.g., HTML pages, images)

Reduces latency, bandwidth use Classification of caches according to

the location Browser Cache Proxy Cache Surrogate Cache

Proxy CachingProxy Caching

a middle-ware connecting end-user and Web servers

function as servers to client programs and as clients to web servers.

Advantages: minimizes bandwidth usage, network

latencies. degree of control offered to the system

and network administrators.

Proxy CachingProxy Caching block the users from visiting undesirable

sites usage accounting and force authentication

SQUID, one of the most popular proxy web cache server

SQUIDSQUID

Caching proxy for the HTTP, HTTPS, FTP, etc.

Extensive access controls and great server accelerator.

Runs on most available operating systems

SQUID (continued…)SQUID (continued…)

Three main components Client side Server side Storage Manager

Architecture of squid is given in figure 1

Architecture of Squid

Figure 1 : Squid Software Structure (Source [3])

Connection A between client and the client side, Connection B between server side and original server. Connection A receive the request from client and send the response to client.

Data Stream Splicing Optimization On Squid

Redundant data copies result in poor performance.

Data stream splicing optimization can be applied

Includes three models: splicing client and serversocket splicing local file cache and client socket splicing server socket and local file

cache

Recent Developments in Proxy Recent Developments in Proxy CachingCaching

large portion (up to 40%) of Web content is “uncacheable” .

Existing caching ignore non-static objects

Recent proxy caching research in areas of Caching of uncacheable QoS aware caching services.

Recent Developments in Proxy Recent Developments in Proxy CachingCaching

Caching of uncacheableCaching of uncacheable Caching of mixed objectsCaching of mixed objects Caching streaming dataCaching streaming data Caching TransactionsCaching Transactions

QoS aware cachingQoS aware caching

What is AJaXWhat is AJaX

Ajax stands for Asynchronous Java XML. Combination of technologies coming

together in powerful new ways. Ajax incorporates:

JavaScript Cascading Style Sheets (CSS) Web page DOM Asynchronous communication with web

server

Classic Vs AJaXClassic Vs AJaX

Classic (Synchronous) Vs AJaX (Asynchronous) application modelSource : Jesse James Garrett, www.adaptivepath.com

Implementation issues Implementation issues with Ajaxwith Ajax

Difficulties in Ajax implementation Browser Back Button Bookmarking Error-handling URL's don't change as state changes Requires good discipline on part of

development team

A web browser for Ajax A web browser for Ajax approachapproach

Noriko and Nao Ikemiya suggested a new web browser, based on an asynchronous communication model.

Based on following concepts No change of client programs and

server programs of web applications Asynchronous communication with web

servers using Ajax Updating only different parts of a web

page.

A web browser for Ajax A web browser for Ajax approach (continued…)approach (continued…)

Asynchronous model for web browser, Source [4]

Model divided into four parts

1)Parsing: Syntax trees

generation.

• Generating JavaScript: Adding new

JavaScript codes for updating partially.

JavaScript access difference table for partial update.

A web browser for Ajax A web browser for Ajax approach (continued…)approach (continued…)

3) Searching difference: Computing difference between the two web

pages Partially update, If the difference is not large

4) Updating Partially: Accesses to the difference table at constant

intervals Main block and the Sub-block execute

independently each other.

A web browser for Ajax A web browser for Ajax approach (continued…)approach (continued…)

Performance Under a heavily load server

browser performs well. performance issues speed of the partial

updating, and correctness of judgment. Under a lightly loaded server

additional calculations required. the speed performance of this browser

lower than normal browsers.

Asynchronous predictive fetching using Ajax

Implements both the prediction and the prefetching engine.

This implementation done by Andi Ahmad Dahlan and Toshikazu Nishimura

User’s current actions divided into two categories: Synchronous user actions Asynchronous user actions

Asynchronous predictive fetching using Ajax

Ajax engine employed as prefetching engine. Requires a cache in order to keep all

prefetched responses. JavaScript Object as Browser-side holds the

request and its corresponding response in pairs.

Cache interrogated first, cache hit means the corresponding response already there.

Application scripts pick the response up and display.

Asynchronous predictive fetching using Ajax

The experiment done by Dahlan and Nishimura

Performance improvement of average response time of 64.5%.

Performance of this scheme depends on correctness of predictions.

Incorrect predictions lead to increase in response time as well as wastage of bandwidth

Asynchronous Predictive Asynchronous Predictive Fetching Suggested by Web Fetching Suggested by Web

ServerServer Web server creates prefetching hints

dynamically Sends response with prefetching

policies Prefetches the responses based on

predictions and stores the web content in memory for future use.

Difference is that client just follows the policies it received from the web server.

Available Ajax Frameworks

Google Web Toolkit (GWT) Dojo Yahoo! User Interface Library Rialto Toolkit (Rich Internet

Application Toolkit)

AJaX Vs FlashAJaX Vs Flash

No plugin for AJaX Flash development tools cost money Flash typically has slower page load

time Flash can work on older browsers Flash can access other domains,

AJaX can not access other domains

Some ExperimentsSome Experiments web application named as Stock Watcher

in two versions one using Ajax approach and other using classical approach

In both versions, stock table is updated after every 5 seconds.

One uses asynchronous transfer using XMLHTTPRequest and other uses refreshing of whole page.

Used YSlow and Firebug for capturing performance statistics

Some Experiments Some Experiments (continued…)(continued…)

Performance comparisonPerformance comparison Experiment for 20 times update for both Experiment for 20 times update for both

version.version. Classic approach Classic approach

HTTP Requests = 28 * 20 =560HTTP Requests = 28 * 20 =560 Page size accessed = 13 * 20 = 260 KBPage size accessed = 13 * 20 = 260 KB

AJaX approachAJaX approach HTTP Requests = 28 + (1*19) = 47HTTP Requests = 28 + (1*19) = 47 Page size accessed = 16 + (2*19) = 54 KBPage size accessed = 16 + (2*19) = 54 KB

Some Experiments Some Experiments (continued…)(continued…)

From the graph it is clear that, Ajax giver better response time as compare to traditional web applications.

Besides this experiment, I have written simple web applications using GWT. GWT optimizes Ajax applications by completely separating dynamic content into JavaScript and static content as HTML.

0 5 10 15 20 25

0

50

100

150

200

250

300

350

400

450

500

Response Time of Ajax and Traditional Approach

Traditional Approach

Ajax Approach

Update Number

Res

pons

e Ti

me

(in m

s)

ConclusionConclusion By using some optimizations dynamic

contents can be dealt well with web caches.

Ajax has brought new trend in developing web application for providing transparent and smooth communication.

GWT requires knowing only two technologies Java and HTML.

Web caching together with efficient web programming technology such as Ajax required

ReferencesReferences1) Daniel Zeng, Fei-Yue Wang, Mingkuan Liu, “Efficient Web

Content Delivery Using Proxy Caching Techniques” , IEEE TRANSACTIONS ON SYSTEMS, MAN, AND CYBERNETICS—PART C: APPLICATIONS AND REVIEWS, VOL. 34, NO. 3, AUGUST 2004.

2) Jesse James Garret, “Ajax: A New Approach to Web Applications”, http://www.adaptivepath.com/ideas/essays/archives/ 000385.php, 2005.

3) Jingli Zhou, Jifeng Yu, Hongtao Xia, “Data Stream Splicing for Web Proxy Cache Optimization”, IEEE Proceedings of the Japan-China Joint Workshop on Frontier of Computer Science and Technology (FCST'06) 0-7695-2721-3/06 .

4) Noriko Hanakawa, Nao Ikemiya, “A web browser for Ajax approach with asynchronous communication model”, Proceedings of the 2006 IEEE/WIC/ACM International Conference on Web Intelligence (WI 2006 Main Conference Proceedings)(WI'06) 0-7695-2747-7/06.

5) Andi Ahmad Dahlan, Toshikazu Nishimura, “Implementation of Asynchronous Predictive Fetch to Improve the Performance of Ajax-Enabled Web Applications”, iiWAS2008, November 24–28, 2008, Linz, Austria.2008 ACM

Thank YouThank You