Using AJAX to improve the bandwidth performance of Web programs

Source: Internet
Author: User
Tags functions header html form html page
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" >




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.