Explore the performance difference between GET and POST requests in browsers when running AJAX. In one web application, I noticed a marked pause in some browsers when loading a new request, which I diagnosed as slowness in using POST. We want to take a closer look at HTTP performance in browsers, as slowness defeats the point of AJAX in the first place.
| Browser tested | HTTP Post performance with AJAX |
| Firefox 2.0 |
Very slow Would freeze for nearly 1 second |
| Opera 9.5 beta |
Very slow Would also freeze the UI |
| Firefox 3 RC 1 | Fast |
| Safari 3.1.1 Windows | Fast |
| IE 7 and IE 8 | Fast |
My initial searches yielded Yahoo's Exceptional Performance site, which is a good resource. It lists the rule Use GET for AJAX Requests. Some bloggers and programmers noted that they didn't recognize a big difference between GET and POST. However, as I will show next, my results varied in various browsers.
The slowdown in my high-performance AJAX applications, in Opera and Firefox 2.0, was very pronounced when using POST, but nonexistent when using GET. One other interesting thing is that Firefox 3.0 RC 1 has solved the POST slowdown when using AJAX pages. Meanwhile, Opera 9.5 remains the one browser that is seriously slowed down with POST.
Here we don't need benchmarks, as the results are quite pronounced and Yahoo!'s team has studied the situation carefully. However, I will show you some AJAX and ASP.NET code snippets, just as a reminder or refresher. This is what I changed in my programs to improve the performance. First, here is the fast GET version.
function exampleGetFunction()
{
// This code uses GET queries.
// It fetches a URL with the name parameter
// Example will run quickly in all modern browsers.
request.open("GET", "?name=" + encodeURI(inputValue));
request.send('');
}
Next we need to look at the "slow" version, which uses POST. The next generation of browsers doesn't suffer with this problem (excluding Opera), but it is still wise to accomodate your users who haven't updated their software recently. This is the POST version.
function examplePostFunction()
{
// This code uses POST.
// Example will run slowly in some browsers.
request.open("POST", "Default.aspx");
request.send("name=" + encodeURI(inputValue);
}
POST requests are appropriate for more complex or important interactions, so your requirements may vary. I do not understand what browsers do with synchronous versus asynchronous requests. This space is enormously complex and riddled with inconsistencies.
One advantage of AJAX is to enhance user-interface performance and reduce bandwidth, but POST can defeat the performance advantage. However, using GET queries works well in all browsers and this I recommend GET requests for regular AJAX programming.