Performance benchmark: PHP Generated content VS. javascrpt and DOM over AJAX

Question

Hi,

For the following pretty straightforward task: query a list of products from a DB and present it on a webpage, consider 2 setups:

Setup1: PHP script queries. All content is built on the server and the entire page is served back to the client.

Setup2: Static HTML "page skeleton" requesting content using AJAX. Received content is parsed on the client side using Javascript and rendered using innerHTML or similar.

Of course the second setup only makes sense when you have pages, categories and tags for the client user to choose from.

I need to compare these two, at least by means of:

• time it will take content to be served
• user experience (setup1 is delivered as a whole, setup2 is delivered in "two parts")
• scalability - how do the setups compare when I have 100,000 queries daily

Any thoughts on the issue will be much appreciated.

Answer 1

AJAX is probably better choice when only a small part of the page changes.

I would recommend starting with the server side version and then building AJAX on top of that. This way you will get also a version of your site that works without javascript, which you probably need anyway if you care about being indexed in search engines.

But first concentrate on creating a page that just works - you can always optimize it later.

Answer 2

Performance on the client has many factors. What is running at the time, what browser, what the content is, what the CSS of the page is, how full is the browser's cache, what plug-ins are installed, what is happening on the network, etc. Just remember that when you are playing with the numbers.

Answer 3

Unless the implementation sucks, AJAX should win hands down. Among the benefits are:

• parallelism due to parallel requests on the client side (i.e. you can use multiple server CPU cores to serve parts of one served web page, that can't be done easily using PHP)

• refreshing only small parts of the page is faster (less data to transfer, generate ...)

• it scales much better since the server has less work to do (esp. if you can offload some of the processing needed for generating html to the client instead of just delivering it)

Dynamic pages like http://www.startpagina.nl/ have been doing this successfully since way before the recent AJAX fad (1 static file delivered, all customization done on the client side - last time I checked anyway).

Of course you can screw things up with either method so that it becomes slower than the other.

Answer 4

You may find the following question helpful: Smarty Vs. Javascript/AJAX

I brought up a few points in my answer to that question:

• You should use server-side scripts to show any data that is known at the moment the page is loaded. In this case, you know the list of products should be displayed. The fact that a question's answers should be shown is known at page load.

• You should only use AJAX calls to load dynamic data that is not known at the moment the page is loaded. For example, when you click the "comments" link under a question or answer on Stack Overflow. The fact that you want to view a particular question's comments is not known at page load.

• Javascript should not be required to access core functionality of your site.

• You should gracefully degrade functionality when Javascript is disabled. For example, Stack Overflow works just fine with Javascript disabled. You don't have access to real-time Markdown previews or dynamic badge notices, but the core functionality is still intact.

• A single HTTP request to a server-generated page will load significantly faster than a request to load a page that makes five or six additional AJAX calls, especially on high latency connections (like cellular networks). See Yahoo's Best Practices for Speeding Up Your Website.

You should think of Javascript as a bonus feature that might not be enabled, not as something that should be used to construct critical pieces of your website. There are exceptions to this rule. If you want to do some sort of pagination in which you click a "next page" button and only the product list changes, AJAX might be the right choice. You should, however, make sure users without Javascript are not excluded from viewing the entire list.

There's nothing more frustrating than when a page can't be accessed because the web developer didn't obey the KISS principle. As an example, take Friendly's Restaurants. I wanted to check out their menu while I was at the mall, so I loaded their website on my iPhone, only to find out that you literally can't get any meaningful information about the restaurant without Flash. It's nice to have fancy menus with swooshing desserts flying everywhere, but in the end, I just wanted to see the items on their menu. I couldn't do that because they required Flash. Graceful degradation in service would have been helpful in that case.

Some things on the web can't be done effectively without Javascript. Displaying a list of products is not one of them. If you are still unsure, look at how other popular websites do things. I think you'll find most of the successful, well-engineered websites follow the guidelines listed above.