Using AJAX to improve the bandwidth performance of Web programs

Ajax| Program | detailed | performance

introduce

As a Web performance testing company, we have been concerned about the impact of new development technologies in improving the performance of Web page programs. Many of our users are experiencing problems that affect their performance only because of the size of their web pages. Simply put--the page is too big to achieve the desired performance under limited bandwidth conditions. In many cases, the basic elements that are included in different pages are the same. For example, the page header, footer, navigation bar are rarely changed, and in some programs there is even no change. This inspires us to save considerable bandwidth if the program only updates the parts of the page that need to be changed.

Target

To verify the theory, we decided to see if the program could save at least 50% of the bandwidth. We have chosen a fairly simple internal data analysis program. The program consists of a typical page layout: The middle is the content part of the change. There are no changes to the page header, footer, or navigation bar section. We have edited the program so that it can be accessed through traditional page refreshes and Ajax methods. Next we use the test tools (Web Performance Analyzer) to analyze the bandwidth utilization of two different ways of web pages.

Results

The first result of the experiment was a bit surprising to us. When it comes to Ajax architecture, we thought it would be a bother to choose a suitable AJAX structure to use in our program. After doing some simple experiments with some popular web architectures and taking into account the dangers of JavaScript functions, we decided to use some of the simple javascrip functions we chose to achieve our goal. We were able to get the code snippets we needed from a wide variety of javascript/ajax usage guides on the web, and we modified the program to take advantage of Ajax by no more than 100 lines of Javascript code. No frame structure is required.

Scenario/mode
First-page size
Typical page size
Total bandwidth
Page-refresh
44k
10k
210k
Ajax
47k
2.5k
81k

Total bandwidth Saving >61%

Where does the bandwidth savings come from?

Here's a screenshot from the Test tool (Web Performance Analyzer) that shows the size of the traditional and Ajax two different versions of page transfer data. You can see URLs (links) and sizes from the image below, and AJAX-mode programs do make the home page bigger. In our test, about 3 K is larger. This is not surprising, because this page contains additional JavaScript programs to drive AJAX patterns. If you choose an AJAX frame structure, it is estimated to be much larger.

Most notably, however, the size of the typical page dropped from about 10K to an average of about 2.5K--down 75%.

Illustration 1: Bandwidth required for traditional Web page refresh mode

Click the picture to enlarge the view

Diagram the bandwidth required for 2:ajax mode

Click the picture to enlarge the view

In order to achieve bandwidth savings, we have made a small number of changes to the program

Apply mode switch

First we added an application mode switch. Use an associated parameter in the Web page program descriptor to enable the program to ask whether it is using AJAX or Web page refresh mode. Note that it is not required for all programs.

HTML form component Changes

Here we edit the form component of the HTML code to change the form submission mechanism. For example, the following is the code for the start tag of the edit before and after Drop-down menu (select) component:

<select name= "Type" >

<select name= "Type" >

The SELECT element would now call a JavaScript function ("below") instead of the using the browser to submit the form.

After the modification, the Drop-down menu component invokes the JavaScript function (see below) instead of submitting the form through the browser.

Add a span tag to the HTML code containing the FORM label

To mark the part of the HTML page that needs to be updated dynamically with the server's return, we will name the span label with the tag parameters in the JavaScript function.

<span id= "Content_area" >