Thursday, April 24, 2014

jQuery makes AngularJS 50% slower on an iPhone

AngularJS can optionally use jQuery instead of its built-in jqLite DOM library. This is useful if you want to integrate jQuery-based components into your app. From previous testing I knew jQuery was somewhat slower, but I have to admit I was surprised when I found out how much slower it was.

The test is a very simple AngularJS app with a button that creates 2000 items rendered with ng-repeat. Below is a screenshot of profiling this with my Mobile HTML5 Rendering Profiler - the version with jQuery 1.11 spends over twice as much time in Javascript and a bit more time in Style calculation (click for larger view):

The Mobile HTML5 Rendering Profiler

To delight users, your mobile app needs to feel snappy and respond to gestures immediately. Doing that with the mobile web can be tough. The Profiler helps you buy measuring whether your changes are helping. It runs your test setup several times so that you can see distinguish real changes from noise caused by timing, javascript optimization and garbage collection.

Updating the visible UI of your web app requires changing the DOM (with javascript), recalculating the styles and layout and painting the results on-screen. The Profiler will show you the time taken by each phase, as well as how many recalculations are needed for the end results. These will guide you in making changes that improve the visible performance.

The Profiler will set you back 55 EUR (+ VAT), but do first download the 7-day trial and see what makes your app go fast (or slow...).

Test setup details

This uses angular 1.3.0-beta6 and jQuery 1.11.0, running on an iPhone5 with iOS 7.1.1. The profiling is done for the button press, so after the javascript has been fully loaded (but probably before significant optimizations of the javascript). The pages under test are plain AngularJS and with jQuery - the only difference is in loading or not loading jQuery (before Angular).

jQuery 2.1: better

jQuery 2.1 improves things a bit, but is still 35% slower:

AngularJS 1.2: the same story

(Update at 2014-04-24 21:17 EEST)

@m_gol on Twitter rightly pointed out that AngularJS 1.3 and jQuery 1.11 isn't the most relevant combination as AngularJS 1.3 has dropped IE8 support whereas jQuery 1.11 hasn't (but jQuery 2.1 has). Now that isn't the whole story, as the Angular folk are saying that 1.3 might still work with IE8, but it's a good point.

Here's then the same test but using AngularJS 1.2 (1.2.16) instead of 1.3. Now jQuery is 56% slower:

Android: not as bad, and yet, worse.

(Update on 2014-04-25) See the next blog post.

Why is AngularJS slower with jQuery?

(Update on 2014-04-26) See the followup.

6 comments:

Radu said...

Could this be solved by loading jQuery after Angular, so that Angular does not use jQuery internally, but it's still available for the developer?

Mika Raento said...

@Radu: yes, absolutely. There are, however, a number of plugins/libraries that want angular.element to be jQuery (and there is a certain convenience to that) - this post is meant to highlight the tradeoffs in doing that.

Vilje said...

Hello. I am new to this but find Angular very interesting. Little experience with both, so my question is: Can someone do the same with Angular as most do with jQuery today? Is Angular a solution for the future that challenge jQuerie's existence? Again, i know very little, but ever since i saw Angular being demonstrated, i was pumped up and ready to dive in. But noone has made it clear to me yet, what it is compared to jQuery. Anyone with knowledge who can clarify for me?

Mika Raento said...

@Vilje : that's a very pertinent question with no easy answer. You can definitely build an app with AngularJS without using jQuery, but AngularJS doesn't do everything that jQuery does - and it does do a lot more.

Do check out this discussion on Stack Overflow.

Personally, I find AngularJS's tools for modularizing my UI great and would not go back to plain jQuery. OTOH, I have used jQuery to implement directives.

Vilje said...

Thanks Mika. I feel better now that I know the question wasent too far off leftfield. I will save that URL for when i know more, and just to underline it: the more i see of Angular, the more i see how i think web should be. The live updating thing (AJAX-like) behaviour it can give, makes my newly delve into web development alot more interesting. I fantazised alot about making webpages that behaves similar to a video-game menu. Where its alot of animation and informationfields popping up etc... just the whole idea of this on the web for websites, makes my hair stand up on my arms :) Again, ty for a reply Mika!

DavidC said...

Mika

Thanks for the post - I removed jquery and it did speed up hugely. It was locking up on my Android (S2) browser.