Use ajax to improve the bandwidth performance of website programs

As a Web page performance testing company, we have been paying attention to the impact of new development technologies on improving the performance of Web Page programs. We have many users who encounter problems that affect their performance only because of their webpage size. Simply put, the page is too big to achieve the desired performance with limited bandwidth. In many cases, different webpages have the same basic elements. For example, the page header, footer, and navigation bar are rarely changed, and even remain unchanged in some programs. This inspires us to save considerable bandwidth if the program only updates what needs to be changed on the page.

Target

To verify this theory, we decided to see if the program could save at least 50% of the bandwidth. We chose a fairly simple internal data analysis program. A program consists of a typical web page layout. The intermediate part is the changed content. The page header, footer, and navigation bar are unchanged. We edited the program so that you can access it through the traditional page refresh and Ajax methods. Next, we use the test tool (web page Performance Analyzer) to record and analyze the bandwidth utilization of two different web pages.

Result

The first result of the experiment was a little surprising. Speaking of the Ajax architecture, we thought it would be a lot of trouble to choose an appropriate Ajax Architecture Application in our program. After some simple experiments with some popular web architectures and taking into account the danger of JavaScript Functions, we decided to use some simple javascrip functions to achieve our goal. We can get the code segment we need from a wide range of JavaScript/ajax user guides on the Internet. with no more than 100 lines of JavaScript code, we can modify the program to use Ajax. No framework structure is required.

Scenario/Mode	First-page size	Typical page size	Total Bandwidth
Page-Refresh	44 K	10 K	210 K
Ajax	47 K	2.5 k	81 K

Total Bandwidth savings> 61%

Where does the saved bandwidth come from?

Below we captured from the test tool (web page Performance Analyzer), showing the size of page transfer data for two different versions of traditional and Ajax. As you can see, the URL and the size of the URL are larger. In our test, the size is about 3 K. This is not surprising, because this page contains additional javascript programs to drive the Ajax mode. If you use the Ajax framework structure, it is estimated that it will be much larger.

However, it is worth noting that the size of a typical page has dropped from about 10 K to about 75% K on average-down.

Figure 1: bandwidth required by the traditional web page refreshing Mode

(Click to zoom in)

Figure 2: the bandwidth required by the Ajax Mode

(Click to zoom in)

How to do it

In order to save bandwidth, we made a few modifications to the program

Application mode switch

First, an application mode switch is added. A correlation parameter is used in the webpage program descriptor to enable the program to ask whether the Ajax or webpage refresh mode is used. Note that not all programs are required.

HTML form Component Changes

Next we edit the form component of the HTML code to change the form submission mechanism. For example, the following code is used to edit the start label of the select component:

<SELECT name="type" onChange="window.document.theform.submit()"> <SELECT name="type" onChange="submitForm()">

The Select element will now call a JavaScript function (see below) instead of using the browser to submit the form.

After modification, the drop-down menu component will call the JavaScript function (see the following) to submit the form in place of the browser.

Add the span tag to HTML code to include the form tag.

To mark the part on the HTML page that needs to be dynamically updated with the content returned by the server, we will name the span tag using the tag parameter in the JavaScript function.

JavaScript Functions

Next, write a piece of code or select the javjavascript function to complete Ajax mode form submission and page refreshing.

1. Create a new string containing the submitted content.

2. Submit the content to a specific URL and call the response method.

Submitform ()

function submitForm() { var content = convertFormDataToPostContent(window.document.theform); doPost('/office/UsageAnalyzer', content, 'processResult'); }

Note that the third parameter in the dopost () method is 'processresult '. This is a "method" for replying to a response ". After the Asynchronous Method is completed, the result is returned.

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

Processresult ()

function processResult(result) { document.getElementById('content_area').innerHTML = result; }

It is relatively easy 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 server. This code is obtained from the Internet, and pages can be easily found in Ajax articles and framework 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 item conversion method Concatenates the content in the form into a certain format for submission. Similarly, these codes can be obtained from related 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 with specific repeated parts on each page, updating only the relevant parts of the webpage using the Ajax method can save bandwidth. With less than 100 lines of JavaScript code, we can convert web programs into Ajax update Methods, greatly reducing the bandwidth usage required by (> 60%) instance programs.

Future Direction

It is interesting to test more practical applications implemented using the Ajax method we mentioned here. If you have such a program, please contact us.

The impact on server CPU resources will be an interesting research. However, there is no need for database queries or other process processing on our page, so this reference program is not necessarily the best choice for such testing.

Edit prompt: original English versionSee