Factors for Javascript performance

Question

I understand that the browser does all the work in processing client side scripts (Javascript, JQuery etc), but wanted to know if anything else matters when it comes to performance (Network speed, Speed of the client computer, Server environment)

If it's completely dependent on the browser (type and version), is it correct to say that the first time a page is accessed, it's slower and then the browser caches the JS file/scripts and it runs faster from then on?

Can someone explain how all this comes together?

Answer 1

Depending on the browser and settings, certain parts of the JS, CSS, Flash or images will be cached. Then if you reload it'll be faster.

Answer 2

It depends on what you are doing, to really answer this.

For example, if your cpu is busy on rendering an animated movie while use a javascript application you will see a slower performance.

If you have a very interactive site, that sends a lot of data back and forth, over a 300 baud modem, the application may seem slower.

The browser is important though, as IE8 for example appears to be slower than Chrome, based on these benchmarks: http://www.lifehacker.com.au/2009/09/browser-speed-tests-chrome-40-and-opera-10-take-on-all-challengers/

Here is a dated article about javascript benchmark tests that explains each one well, and may help you understand javascript performance.

http://www.codinghorror.com/blog/archives/001023.html

If your application uses lots of pages and you d/l all the javascript, or the main ones, upfront, then yes, it will run faster after the first page, but that is dependent on how your application is designed. If you never reload a page, but do everything dynamically, then you won't get a benefit by having 20 script files loaded in the beginning.

Answer 3

Everything is a factor at some level.

Most scripts are downloaded synchronously, so network speed is a big deal until the script is cached. You can mitigate this to some degree in newer browsers, so long as your script doesn't modify the DOM at load time (document.write()...) and isn't required by other scripts on the page, but they still have to be downloaded before the browser can consider the page loaded. Minifying your scripts can help them to travel over the network faster, and configuring your server to serve them gzip compressed can help even more... But once cached, this isn't as much of a factor.

The speed of the client computer directly affects the speed of the browser - the script execution environment. A fast browser will still run scripts faster on a fast computer.

A fast browser VM can make a huge difference: current execution environments for JavaScript have vastly different performance characteristics. Browsers can be faster or slower in different areas: a fast VM coupled with a slow DOM will run scripts quickly only until they start making major modifications to the page; a fast DOM with a slow VM will blaze along until the script tries to do some non-trivial processing. And once the script is cached, these browser performance characteristics become that much more important - your "faster once cached" assumption holds true only if the network speed is initially a noticeable bottleneck.

The server has to respond in a timely manner to any requests made of it. A fast script VM won't matter if the script is waiting on the server to respond to an AJAX request that queries a slow database or performs other heavy server-side processing. A fast network connection won't matter for small amounts of data or script if the server is slow to respond to requests for them.

---

Further reading:

• JavaScript Performance Evaluation
• How do you measure page load speed?
• Yslow alternatives - Optimisations for small websites

Answer 4

If the server is set up correctly, the javascript files are cached so they don't need to be redownloaded for each page view. This helps things be faster.

The browser's javascript engine can be more or less optimized. This also affects performance. Right now we're seeing competition among browser vendors for "who can make the fastest JS engine".

The client computer is doing the actual processing, so the faster the computer the faster the script execution. Trying to run intensive modern JS on a 166MHz Pentium is gonna be painful.

In addition, the code itself has a huge impact on performance. Well-written javascript can run orders of magnitude faster than poorly written javascript. My favorite video on the subject is here: Google Tech Talk: Speed Up Your JavaScript