jQuery parse times

The amount of time required to parse jQuery was measured on a variety of devices. On the latest generation it was parsed in less than 100ms but on older devices it can take 250ms or more. No significant difference was found between jQuery 1.11.0 and 2.1.0. iOS outperforms Android devices of a similar age. On iOS, Chrome consistently parsed jQuery faster than Safari.

Introduction

Whilst jQuery has become the de facto browser abstraction library it does come with a performance cost. In addition to the time required to transfer the data over the network, the browser's JavaScript engine must parse the code. On devices with slower processors, and in browsers with less efficient JavaScript engines, this additional overhead can be significant. In order to quantify this data was collected on a variety of devices.

Method

The tests were carried out using a page built to record some information about the device and the parse time information. The page included one of two versions of jQuery - 1.11.0 or 2.1.0 - selected by a query string parameter. The collected data was sent to a logging endpoint on the server via an asynchronous request and stored as JSON. The full server side code is available on GitHub.

For each device tested, the page was re-loaded multiple times for both versions of jQuery. Requesting a reload should ensure that all resources are refreshed from the server making it a fair comparison each time.

Once collected, the data was analysed using a Python script that calculated the mean and the standard deviation (σ).

When measuring the parse time of jQuery it is important to try and eliminate the effect of the network. One method for this would be to include the library in-line with the page and measure the page's load time. However, jQuery is normally included as an external file so measuring the parse time in this situation was considered preferable if possible. When included as an external file measuring the page's load time will be dependent on the network connection as an extra request will be made. In order to accurately assess the time taken to parse jQuery in an external file timers were set at the start and end of the file, immediately before and after the jQuery code:

window.t_start = new Date();
/*! jQuery v1.11.0 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */
!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");…
window.t_end = new Date();

The difference between the start and end timers was measured on the same device on a variety of network connections to verify that the timings recorded were independent of the network.

Results

Due to the volume of data the results have been moved to an appendix.

The raw data is available on GitHub.

Conclusion

With the timers in the same external file as the jQuery code there were no significantly different results for parse time on different networks indicating that the effect of the network had been successfully eliminated from the measurements.

In general the results are as expected with more modern devices taking less time to parse jQuery - current generation devices generally taking less than 100ms. With the exception of the iPhone 3G and the Nintendo DS, all devices will parse jQuery in less than 250ms on average, however, it is important to note that the deviation on these devices is very high so the actual time in individual cases could be significantly greater.

The iPhone 5S and iPad 4 took less time than a 2012 MacBook Air showing that hand held devices are no longer necessarily slower than their larger counterparts.

Safari on iOS took consistently longer than Chrome on the same device. This is the opposite of what was expected as Chrome uses a WebView which supposedly has lower JavaScript performance. On Android devices, Chrome was consistently faster than the system Browser, which is as expected.

iOS devices out perform Android devices of a similar age, in some cases by a significant margin.

Taken overall, there is no significant difference between the parse times for jQuery 1.11.0 and 2.1.0 despite the latter's slightly smaller file size (95K vs 82K). Whilst there may not be a significant difference in the parse time of the library this does not mean that they are of equivalent performance when it comes to use - this would require additional research to determine.

If you are going to include JavaScript libraries on your pages you should be aware that, on older devices, they may come with a performance overhead beyond that taken to request and transfer the data over the network. To mitigate this you should look at using asynchronous and lazy loading techniques.

Acknowledgements

Thanks to DeviceLab for the use of a number of their devices to improve the test coverage.

Appendix

Network isolation results

These tests were performed with jQuery version 1.11.0 in Chrome on a Galaxy Note 2 running Cyanogen.

jQuery parse times