Using AJAX to improve the bandwidth performance of Web site programs

Ajax| Program | performance

Introduced

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.

Goal

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 to enlarge )

Diagram the bandwidth required for 2:ajax mode

( click to enlarge )

How do you do that?

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.

JavaScript functions

Next we write a piece of code or select the Javjavascript function to complete the AJAX schema form submission and page refresh.

1. Creates a new string containing the submitted content.

2. Submit the content to a specific URL, and then call the reply-to response method when completed.

SubmitForm ()

function SubmitForm () { var content = convertformdatatopostcontent (window.document.theform); DoPost ('/office/usageanalyzer ', content, ' Processresult '); }

Note the third parameter in the Dopost () method: ' Processresult '. This is a "method" for responding to responses. When the asynchronous method completes, the method will invoke the result return.

The task of the Processresult () method (mentioned below) is to update the document with the content submitted. Note the ' Content_area ' parameter in the getElementById () method is the same as the ID parameter in the span tag that is added to the HTML.

Processresult ()

function Processresult (Result) { document.getElementById (' Content_area '). InnerHTML = result; }

It is relatively straightforward to submit the sent content to the server. Create a browser Request object, submit the content, and create a function to respond to the content returned by the processing server. This code is taken from the Web, and pages can be easily found in Ajax articles and frame structures.

DoPost ()

function doPost (URL, content, callback_name) { var async_request = false; Mozilla/safari if (window. XMLHttpRequest) { Async_request = new XMLHttpRequest (); Async_request.overridemimetype (' Text/xml '); } Ie else if (window. ActiveXObject) { Async_request = new ActiveXObject ("Microsoft.XMLHTTP"); } Async_request.open (' POST ', url, true); Async_request.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded '); Async_request.onreadystatechange = function () { if (async_request.readystate = 4) { Response_content = Async_request.responsetext; Eval (callback_name + ' (response_content); "); } } Async_request.send (content); }

The form single conversion method concatenates the contents of a form into a certain format for submission. Similarly, the code can be obtained from the relevant resources and the Internet.

Convertformdatatopostcontent ()

function Convertformdatatopostcontent (form_name) { var content_to_submit = '; var form_element; var last_element_name = '; for (i = 0; i < form_name.elements.length; i++) { Form_element = Form_name.elements[i]; Switch (form_element.type) { Text fields, hidden form elements Case ' text ': Case ' hidden ': Case ' password ': Case ' textarea ': Case ' Select-one ': Content_to_submit + = form_element.name + ' = ' + Escape (Form_element.value) + ' & ' Break Radio buttons Case ' Radio ': if (form_element.checked) { Content_to_submit + = form_element.name + ' = ' + Escape (Form_element.value) + ' & ' } Break Checkboxes Case ' checkbox ': if (form_element.checked) { Continuing multiple, Same-name checkboxes if (Form_element.name = = last_element_name) { Strip of end Ampersand if there is one if (Content_to_submit.lastindexof (' & ') = = CONTENT_TO_SUBMIT.LENGTH-1) { Content_to_submit = Content_to_submit.substr ( 0, Content_to_submit.length-1); } Append value as comma-delimited string Content_to_submit + = ', ' + Escape (form_element.value); } Else { Content_to_submit + = form_element.name + ' = ' + Escape (form_element.value); } Content_to_submit + = ' & '; Last_element_name = Form_element.name; } Break } } Remove Trailing Separator Content_to_submit = content_to_submit.substr (0, content_to_submit.length-1); return content_to_submit; }

Conclusion

In a program that has a specific partial repetition on every page, using the Ajax class method to update only the relevant parts of the page can be a good way to save bandwidth. With less than 100 lines of JavaScript code, we convert Web programs into AJAX-enabled update methods, greatly reducing the bandwidth utilization required by the (>60%) instance program.

The direction of the future

It would be interesting to test more real-world applications that are implemented using the Ajax methods we mentioned here. If you have such a program, please contact us.

The impact on server CPU resources will be interesting research. However, there is no need for database queries or other process processing in our pages, so this reference is not necessarily the best choice for doing this kind of testing.

<