Client side performance
Performance issues
In the last years client side performance has become an issue. Many sites use Ajax and complex JavaScript for creating RIA applications resembling desktop apps. In many cases there are severe performance problems.
Browsers keep improving JavaScript's speed. Most of them use hotspot compilation for repeating code. Other optimizations are used, for instance Chrome's JavaScript engine uses hidden classes to decrease the penalty caused by JavaScript's dynamic qualities.
Other operations are also optimized and get faster each version. For example, Firefox speculative parser enables concurrent download of resources without interfering with the document processing.
Even with enhanced speed, performance is still an issue. Steve Souders, a "performance guru" from Google, checked and found out that in average, client side processing takes more time than the server side.
Correct code makes good performance
It is important to understand that the way we write our code has a dramatic influence on performance.
There are many resources for performance tips. Here are some good ones:
- Google - Web Performance Best Practices
- Yahoo - Best Practices for Speeding Up Your Web Site
- Steve Souders - 14 Rules for Faster-Loading Web Sites
Performance tools
There are some good tools for performance analysis and profiling. Unfortunately, they are currently specific to each browser.
There is a new Web Timing specification that is beginning to be implemented by Webkit and Firefox. This may allow for a unified performance tool for all browsers.
Static analysis tool:
- YSlow is a Firefox extension that checks the application and grades it according to its conformance with performance best practices. It does static analysis of the HTML code. The results are mostly applicable to all browsers, not just Firefox.
Since it’s targeted towards Firefox, some fine grained performance problems in other browsers will be missed - for example Chrome and Safari react badly to inline style tags and perform style recalculation of the entire DOM tree, this is missed by YSlow.
Run time profilers - these tools measure the browser's internal operations like resource loading, parsing, layout and painting:
- For Chrome - Speed Tracer. A Chrome extension that gives performance information in a graphical way. It also gives you "hints" - marks the location of a potential problem and gives a clear textual explanation.
Very useful for finding performance bottlenecks. A great tool but only for Chrome (although the results will probably be relevant for other browsers). - For Safari and Chrome - Timeline tab. It is located in the developer tools that come with the browsers. It brings a subset of Speed Tracer data (both browsers are based on the same engine). The graphical view is less clear and it lacks Speed Tracer's performance hints. The developer tools include also a JavaScript profiler (CPU and heap). You can find a good quick start tutorial for developer tools here.
- For Intenet Explorer - dynaTrace. An IE extension. It’s gives extensive profiling data. A nice feature - it can display the JavaScript code being executed, making it easy to pinpoint to the bottleneck code.
- For Firefox - the well known Firebug extension. It contains only network information and JavaScript profiler - no internal browser operations data. Mozilla are going to add integrated developer tools support in their next Firefox release. Perhaps it will contain such data.