Javascript implementation strategies for hybrid apps

Up until now at Fliplet we’ve not used third party Javascript libraries in our javascript implementation strategy; despite making development faster, we’ve had concerns about performance – notably visual latency (leading to choppy animations) and time spent to load or process data for a screen.

However the development of our brand new charts feature (world exclusive – being released very soon!) required usage of jQuery so we needed to assess the real-world performance impact of using third party libraries.

So we decided to do a performance comparison between the JavaScript libraries Zepto and jQuery and determine which had the least performance impact.

What we did

We tested and compared the performance of Zepto and jQuery or native Javascript. We ensured that we used representative functionality by testing with code that we’d often have to use during normal Fliplet development. We also used benchmark.js to test the relative performance.

Tests that were performed

Based on the most used functionality within Fliplet Javascript to date the following functionality was tested:

Test suite nameNotes
Select by idZepto('#test_1')

jQuery('#test_1')

document.getElementById('test_1')

Select by classZepto('.test_2')

jQuery('.test_2')

document.querySelector('.test_2')
Attach data to elementZepto('#test_3').data('title');

jQuery('#test_3').data('title');

document.getElementById('test_3').getAttribute('data-title');
Insert HTML inside elementZepto('#test_4').html('<div>test</div>')

jQuery('#test_4').html('<div>test</div>')

document.getElementById('test_4').innerHTML = '<div>test</div>'
Create elementZepto('<div>').attr('id','elemId').addClass('someClassName');

jQuery('<div>').attr('id','elemId').addClass('someClassName');

var el = document.createElement('div'); el.setAttribute('id', 'elemId'); el.className = 'someClassName';
Complex selectorZepto('#test_6 .test_6 span:firstchild')

jQuery('#test_6 .test_6 span:firstchild')

document.querySelector('#test_6 .test_6 span:firstchild')

Test framework used

We used benchmark.js as our test framework as it was acknowledged to be the best breed of benchmark test suite for Javascript being mature and providing accurate results.

Setup

All tests were performed inside a UIWebview to ensure representative results (Safari provides additional hardware acceleration not available in UIWebviews)

The testing conditions were as follows:

  • jQuery 2.0.3 and Zepto.js 1.0 Library were used
  • Version of iOS used (iPad 1 = 5.1.1, all others = 6.13)
  • All tests were performed in a UIWebView (rather than Safari)

Results

Find out the full results of Javascript testing.

The conclusion

So as the results show jQuery 2.0.3 is significantly faster than Zepto.js 1.0 although it is still around 70% slower than pure native in most cases. That reduction in performance isn’t notable unless you're doing more than 3k operations per second. Therefore unless a multitude of highly complex operations are being performed jQuery is the preferred choice due to speed of development over native.

Let us know in the comments if you’ve had experience (good or bad) of these or other Javascript libraries!