We are currently building a web application for the financial services sector that is highly depending on client side JavaScript and DOM manipulation. Each time the user changes an input parameter the following steps are executed:

• the data is collected from the user interface,
• sent to the server,
• processed there,
• sent back to the browser
• where the user interface is finally updated with the results.

The application is based on DWR for Ajax communication, Drools as a rule engine running on the server and some custom Java code. Server side execution is rather fast, in the range of 100-200ms. On the client side things are different. Collecting the data is quite fast, too, below 100ms in every browser. Updating the UI is where most of the time is spent.

The user interface contains a bunch of tables to show the results. Rows are created and removed dynamically depending on the returned data and populated with the corresponding properties. This is done using jQuery for heavy DOM manipulation.

The current version of the tool has been tested with different browsers showing some significant differences:

These are just the numbers from our current development version (IE 6 matches the production environment, that's why we didn't test with IE 7 or IE 8 beta).

What is interesting is that Google Chrome with the WebKit HTML and V8 JavaScript engine outperforms Firefox by a factor of three and IE 6 by a factor of six. As Safari is also quite fast this seems to result mostly from the WebKit rendering engine.

Responses[1]

Posted by Stefan Reuter on November 29, 2008 4:21:00 AM CET #