Transcription

1 Optimising Ajax Web Applications with Communication Restructuring Jun Zhang Department of Computer Science University of British Columbia, Canada Abstract: We present an automated run-time optimization framework that can improve the performance of Ajax web applications while preserving its semantics. The key point of this framework is to prefetch and cache dynamic web content intelligently and to use aggregation technology while prefetching and caching the responses on client. XMLHttpRequest are intercepted and replaced by a new one. The new XMLHttpRequest will be sent after it makes sure that there is no cached response on client. Then before the server sent the response to the client, it will bind predictions on future requests with the specific response for this request. After client receives predictions, it will prefetch all responses for those predicted requests and store them for future use. Before transferring those predicted requests or relative responses, we aggregate them into a big one. Our results show that the techniques can speed up Ajax web applications, especially when operating across slower networks. 1 Introduction Ajax aims to provide partial updates for web applications on client. Pages using Ajax behave more like a standalone application than a typical web page. Clicking on links that cause the entire page to refresh feels like a heavy operation. With Ajax, the page often can be updated dynamically, allowing a faster response to the user's interaction. But sometimes it does not completely succeed because of relatively slow network connections. Our approach towards prefetching and caching dynamic web content is intelligent. We predict the possible requests to be sent in the near future according to the current requests. Then we aggregate those predicted requests into a big one. After the server processes those requests and send the aggregated big response, client will parse it and cache their responses in memory on client. 1.1 Contribution - We present a framework which can improve performance of Ajax web applications by prefetching and caching web content intelligently. This tool operates on unmodified Ajax web applications and runs on Firefox web browser on client and java applications on web server. - We demonstrate the use of the tool by experiments and give simple evaluation for the usage. The framework presented here provides some ideas for research aimed at extending optimisation techniques on various web application, and deploying the results in large-scale industrial systems. This report concludes with a discussion of the potential for the work, and the challenges that remain. 1.2 Structure We begin in Section 2 with a discussion of related work. We proceed to cover the optimizations performed in

2 Section 3. We then present some experimental evaluation in Section 4 and conclude Section 5 and finish off with some suggestions for future work in Section 6. 2 Related Work Many factors contribute to a less-than-speedy web experience, including heterogeneous network connectivity, real-world distances, and congestion due to unexpected network demand. Web prefetching and caching, along with other forms of data dissemination, have been proposed as the technologies that help reduce network usage and server loads and improve average latencies experienced by the user. When successful, prefetching web objects into local caches can be used to further reduce latencies [2], and even to shift network loads from peak to non-peak periods [3]. Web caching is the basis for web prefetching, because prefetched link or web pages should be cached on client. Until now, most of the research on prefetching is to use machine learning or data mining mechanism to predict what are the next web pages to be visited (e.g. [4]). In the real world, web prefetching and caching have been widely used in real distributed systems or web browsers technologies. Google is a first well-known website that takes advantage of link prefetching technology, which is a standard compliant mechanism used by some web browsers and utilizes browser idle time to download or to prefetch documents that the user might visit in the near future. A web page content provides a set of prefetching hints to the browser, and after the browser is finished loading the page, and after an idle time has passed, it begins silently prefetching specified documents, storing them in its cache. When the user visits one of the prefetched documents, it can be served up quickly out of the browser's cache. Also, in this scheme, user could input some hint link for prefetching. In addition to web application field, prefetching mechanism is also used in operating system to load predicted pages from disk to memory for future access [7]. Additionally, research on how to reduce remote communication has been done on improving the performance of distributed applications. For example, [5] improves distributed applications written using Java RMI by providing an automated run-time optimization framework. In this framework, Java classes are modified to intercept RMI calls and delayed as long as possible. When a dependence forces execution of the delayed calls, the aggregated calls are sent over to the remote server to be executed in one step. In a word, [5] uses aggregation technology to reduce remote communication cost. Our work is to apply the combination of the idea of web caching and prefetching and the idea of aggregation to Ajax web applications to improve its performance while preserving the semantics. 3 Optimisations In this section, we detail the Ajax web application optimizations. 3.1 Dynamic Web Content Prefetching and Caching In this project, we implemented a prefetching tool, which depends on the work mechanism of Ajax framework. Ajax enables web pages to be updated partially. Then what we prefetch is dynamic web fragment. For Ajax web applications, every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn t require a trip back to the server, the engine handles on its own. If the engine needs something from the server in order to respond, for example, if it s submitting data for processing, loading additional interface code, or retrieving new data, the engine makes those requests asynchronously, usually using XML, for dynamic web content. When the server receives a request, it has to execute a script corresponding to the request. Also, the server will provide the policy for client-side to do prefetching. Those policies will be created dynamically

3 based on the specific request information, including request method, parameter information, and affected HTML DOM elements in the web page. The client prefetches the responses based on those predictions and sends them to the server and stores the web content in memory for future use. Then, if an asynchronous request could find the responding dynamic web content locally, it will not be sent to the server again and just get the content from the memory of client. 3.2 Requests & Responses Aggregation For client-side, it needs to send predicted requests to the web server and then prefetch the responses. To improve the performance of Ajax web applications, we reduce the remote communication cost by aggregating those requests into a big one and send the big one to web server. Also, the client will receive the responding aggregated responses. Then it will parse the big response into separate responses and store them into the memory. Then web server will parse the big request and separate them into independent requests. Then it will send the requests to the right target objects. Each target is a servlet or listener. They will process the request and send back to server and server will aggregate those responses into a big one. At last, the big one will be sent to the client for caching. Figure 1 Sequence Datagram for Optimisation Ajax Web Applications Framework 3.3 Implementation The whole system is composed of six modules: App UI: This module is the web site developed by

4 users. XMLHttpPredictiveCache: This module is deployed on the client side web browser and to do web prefetching and catching. Until now, we just deploy it on Firefox. AddHintFilter: This module is a filter for requests and responses. With it, the server could bind prefetching policy with the original responses. This filter will be loaded by Tomcat automatically. HintCreate: This module is to create the prefetching policies sent to clients based on the request information sent by client. Here the prefetching policy refers to Javascript calls which perhaps to be initiated by those events created by users in the future. Until now, this module has not been done. I just implemented some specific one for specific example. For other situations, we have to input by hand. RequestAnalysisServlet: It is a servlet to handle aggregated requests and to aggregate responses. It receives and parses the aggregated requests, sends the specific requests to responding user applications Then it collects the responses and aggregates them and sends it to the client. User App: This module refers to the user applications developed by users and deployed on server side to handle requests sent from clients. AddHintFilter, HintCreate and RequestAnalysisServlet modules will be deployed on server. Figure 1 has given the sequence datagram of the whole system. The whole process is: Firstly, the user generates an event, which results in a JavaScript call. Then a XMLHttpRequest object is created and will be blocked and replaced by another XMLHttpRequest object provided by XMLHttpPredictive module. The new one will check if there is a cached response for the responding event. If there is no response cached for it, the replaced object will make an asynchronous request to the web server. Before the request reaches the user application, it passes the AddHintFilter, which remembers the requested servlet name. After that, the prefetching policies will be created by HintCreate based on the specific request information and the application itself. At last, the User Application receives the request, processes it and send the response to the client. During this process, the prefetching policies will be attached to the response message by AddHintFilter according to the servlet name remembered and then come back to the client. After the client received the responses, XMLHttpPredictive module will parse the response and update the UI accordingly. On the other hand, it will analyze the prefetching policies and aggregate the responding requests into a big one and send it to the server. Then RequestAnalyzeServlet module passes the request into separate ones and sends those requests to the User Applications, which will send the responses to this module. Then RequestAnalyzeServlet aggregates those responses into a big one and send it back to the client. At last, on clients, XMLHttpPredictive will parse the responses into separate ones and store them into memory. If someone generates a request and if the response has been cached, then requests will not be sent to the server and only the cached responses will be got by XMLHttpPredictive module directly from memory. 4 Experimental Evaluation Table 1 Experiment Data Aggregated Aggregated Results without Requests (Number) Results (ms per Aggregation (ms request) per request) We have tested our optimizations with only one simple example. This simple one is a used to explore the potential of the optimizations. The tests were performed using Windows XP across the local area network of University of British Columbia

5 (The bandwidth is 10MB/s.) Both the client and server are deployed on my laptop, IBM X31 with Intel Pentium M processor 1300MHz, 256M memory. For each test, 5 trials of 5 iterations were performed and the mean was taken as the result. In this example, we show the results before and after applying the framework on the specified web application. As can be seen in the result of Table 1, the optimizations could result in an overall speedup whenever the profiling policy is so effective that they could predict enough requests, such as five predicted requests, to be sent by users in the future. At the same time, according to the result, we also could see that if the predict is not efficient enough, for example, only two requests predicted, then the performance will become worse because of the overhead to do web prefetching and request/response aggregation. 5 Conclusion This paper presents an attempt to extend the scope of run-time optimization to Ajax web applications. Conventional web prefetching and caching is explored and this project focuses on dynamic web content got for Ajax requests. Also, this one takes account into reducing the network latency in prefetching process. We presented a prototype tool which optimizes Ajax web applications. In this tool, we implement two optimizations of web applications. One is to do web prefetching and caching by creating prefetching policy files dynamically. The other is to reduce network latency as much as possible by aggregating predicted requests on client side and relative responses on server side. We presented results for a simple example which demonstrate the performance potential for these optimizations. The result demonstrates that optimization opportunities do arise in real systems. Our prototype is the simple one. There are still a lot of issues, such as prefetching policy accuracy, preserving semantics, caching replacement and testing, not solved in this framework. The details will be mentioned in Section 6. 6 Future Work Until now, we just finished a simple prototype for this system. There are still several important issues not solved in this prototype. Firstly, inaccurate prefetching policy would do nothing but just increase the network traffic. Then how to create effective prefetching policy is the most important issue to solve. Just as what we have discussed in Section 2, there are several ways provided to increase the accuracy of prefetching policy. However there are still a lot of research work needed to be done on whether we could apply those policies to Ajax web applications and what we need do to improve the accuracy of prefetching policy for those schemes. Secondly, one of the most important purposes of our project is to preserve the semantics of the applications. It is very difficult for us to find the request dependency. Perhaps only syntax analysis is not enough. Thirdly, another important issue is on response replacement in cache. Although the memory hardware is low cost, yet it is not wise not to limit the cache size. If we just have some limited size of memory, then we need to consider the policy on how to update cached responses. Fourthly, how to determine whether prefetching should happen or not is another topic needed to be explored. Specifically, when the client or server is very busy, it is not wise to do prefetch. Then under this situation, we should not do prefetching. We should use idle time to do it. In a word, several key issues should be solved in the near future. References [1] Google Web Accelerator: prefetch1 [2] T. M. Kroeger, D. E. Long, J. C. Mogul (1997) Exploring the Bounds of Web Latency Reduction from Caching and Prefetching. Published in USENIX Symposium on Internet Technologies and Systems

International Journal of Principles and Applications of Information Science and Technology July 2008, Vol.2, No.1 Measuring AJAX Performance on a GPRS Mobile Platform Feng Xie 1 and David Parsons 2 Institute

1 The Web, revisited WEB 2.0 marco.ronchetti@unitn.it Credits: Some of the slides are based on material adapted from www.telerik.com/documents/telerik_and_ajax.pdf 2 The old web: 1994 HTML pages (hyperlinks)

Adding Panoramas to Google Maps Using Ajax Derek Bradley Department of Computer Science University of British Columbia Abstract This project is an implementation of an Ajax web application. AJAX is a new

The will provide a step-by-step walkthough of how to download and install the application, activate each feature of the product, install any of the feature's prerequisites, extend the license, and deactivate

Rapidly build, test and deploy Web, Web services and Java applications with an IDE that is easy to learn and use IBM Rational Web Developer for WebSphere Software Version 6.0 Highlights Accelerate Web,

Version 2.1.5757 Author Date Version Audience Overview Assima Technical Documentation 21/10/2015 2.1.5757 All This document contains information on the technical environment required at a client site in

Contents 2 1 System requirements 2 1.1 Server Application 3 1.2 Client Application.com 1 1 Ensure that the computers on which you are going to install the Server and Client applications meet the system

PLATO Learning Environment System and Configuration Requirements for workstations October 27th, 2008 Windows 2000 Professional with SP4 Windows XP Professional with SP2 Windows XP Home Edition with SP2

IMPORTANT NOTICE TO STUDENTS These slides are NOT to be used as a replacement for student notes. These slides are sometimes vague and incomplete on purpose to spark class discussions Google Web Toolkit

Developing ASP.NET MVC 4 Web Applications MOC 20486 Course Outline Module 1: Exploring ASP.NET MVC 4 The goal of this module is to outline to the students the components of the Microsoft Web Technologies

Using Fuzzy Logic Control to Provide Intelligent Traffic Management Service for High-Speed Networks ABSTRACT: In view of the fast-growing Internet traffic, this paper propose a distributed traffic management

Preface Asynchronous JavaScript and XML (Ajax or AJAX) is a web technique to transfer XML data between a browser and a server asynchronously. Ajax is a web technique, not a technology. Ajax is based on

Abstract The problem that we specify is that now day it is too difficult for both writing and maintaining records manually. It takes lots of time for writing records manually. Even there is chance of missing

Rational Application Developer Performance Tips Introduction This article contains a series of hints and tips that you can use to improve the performance of the Rational Application Developer. This article

PLATO Learning Environment System and Configuration Requirements Version 1.1 (for use with Academic Systems Algebra only) for workstations April 14, 2008 Windows 2000 Professional with SP4 Windows XP Professional

White Paper: 1) Architecture Objectives: The primary objective of this architecture is to meet the following requirements (SLAs). Scalability and High Availability Modularity and Maintainability Extensibility

Some Issues on Ajax Invocation I. Introduction AJAX is a set of technologies that together a website to be -or appear to be- highly responsive. This is achievable due to the following natures of AJAX[1]:

Enter Site: This site is best viewed in 1024 x 768 resolution, using IE 6.0 and above. Please remember to clear your browser's cache before you close your Internet browser. Java Applet is required, click

From Desktop to Browser Platform: Office Application Suite with Ajax Mika Salminen Helsinki University of Technology mjsalmi2@cc.hut.fi Abstract Web applications have usually been less responsive and provided

The Research and Design of NSL-Oriented Automation Testing Framework Chongwen Wang School of Software, Beijing Institute of Technology, Beijing, China wcwzzw@bit.edu.cn Abstract. By analyzing the Selenium

System Requirements General Requirements Web Conferencing Version 8.3 Troubleshooting Guide Listed below are the minimum requirements for participants accessing the web conferencing service. Systems which

Questions 1. When will an IP process drop a datagram? 2. When will an IP process fragment a datagram? 3. When will a TCP process drop a segment? 4. When will a TCP process resend a segment? CP476 Internet

Load testing with WAPT: Quick Start Guide This document describes step by step how to create a simple typical test for a web application, execute it and interpret the results. A brief insight is provided

Enabling AJAX in ASP.NET with No Code telerik s r.a.d.ajax enables AJAX by simply dropping a control on a Web page, without otherwise modifying the application or writing a single line of code By Don Kiely

Infor Web UI Sizing and Deployment for a Thin Client Solution Copyright 2012 Infor Important Notices The material contained in this publication (including any supplementary information) constitutes and

1 of 5 3/23/2007 1:37 PM Ajax: A New Approach to Web Applications by Jesse James Garrett February 18, 2005 If anything about current interaction design can be called glamorous, it s creating Web applications.

Hardware Recommendations Alpha Anywhere is a Windows based system that will run on various Windows versions. The minimum requirement is Windows XP SP3 or Server 2003. However, it is recommended that at

Sage 200 Online System Requirements and Prerequisites v2013 Copyright statement Sage (UK) Limited, 2013. All rights reserved. If this documentation includes advice or information relating to any matter