4 ms·

jQuery has a considerable performance cost for the abstractions it provides. It doesn't just call the native methods under the hood, it has to provide additiona

jQuery has a considerable performance cost for the abstractions it provides. It doesn't just call the native methods under the hood, it has to provide additional abstractions like chaining by wrapping every returned object into a jQuery object. In a lot of cases these abstractions aren't helpful because you need to understand exactly what jQuery is doing. If you compare the cost of native methods over what jQuery does you easily add 500 lines of javascript code on every method call. Additionally, jQuery may not provide the abstractions you need or want. If you are using a high level framework that manages templating I would argue that you should use the abstractions designed by the framework and not the one-size-fits all ones that jQuery provides. There is a lot of functionality that jQuery provides that may not be relevant at all for you. jQuery animations are one example. Using jQuery doesn't stop you from running into browser bugs. jQuery could help you out with basic things like selection and event handling but modern browsers are already much improved in this area. I very much dislike the spaghetti code that over reliance on jQuery plugins results in. You have pieces of code that rely entirely on jQuery and can't be refactored out or reasoned with clearly. It is terribly unidiomatic in any case. EDIT: That being said jQuery does have its place.

ivanca 13y ago
I'm with you in that argument, and here is some code to prove it; a little script that orders all 'divs' based on their size; the jQuery implementation freezes the page for a few seconds while the native one does not (Chrome 26 - i7/2.67GHz - W7 64 bits); $("div").sort(function(a, b){ return $(a).width() * $(a).height() - ($(b).width() * $(b).height()) }); [].slice.call(document.getElementsByTagName('div')).sort(function(a, b){ return a.clientWidth * a.clientHeight - (b.clientWidth * b.clientHeight) });
- WesleyJohnson 13y ago
  Are there speed gains to be had by wrapping the a,b elements in the jQuery example only once instead of twice? $("div").sort(function(a, b) { var $a = $(a); var $b = $(b); return $a.width() * $a.height() - ($b.width() * $b.height()); });
  - Schlaefer 13y ago
    Not really: http://jsperf.com/d97b341f-cfc1-4057-bdc9-60e80adb5cf6 http://jsperf.com/d97b341f-cfc1-4057-bdc9-60e80adb5cf6
    - simonw 13y ago
      There is however a significant performance improvement to be had by optimising the inner loop, which is what any good programmer would do first here: http://jsperf.com/d97b341f-cfc1-4057-bdc9-60e80adb5cf6/2 http://jsperf.com/d97b341f-cfc1-4057-bdc9-60e80adb5cf6/2
      - k3n 13y ago
        Written sanely, it's only marginally slower; it's so close that it's inconsequential for 99% of uses.
        ldng 13y ago
        You still have to download 81Kb of code whereas native is just that, native ;-) It's a trade-off. Depends which browser uses your target/customer.
      - Schlaefer 13y ago
        This optimization is actually replacing jQuery in the inner loop with native calls. It was my impression that the OP suggested that this could be performed more efficiently using jQuery.
- euroclydon 13y ago
  Can't you just use jQuery.fn.sort if you don't want the chaining and wrapper overheard that the parent mentions? And if you do, won't you benefit from native methods or polyfills with the same API? Here is what jQuery.fn.sort looks like in the console of Chrome. It appears to be referencing the native sort: >jQuery.fn.sort.toString() "function sort() { [native code] }"
  - ivanca 13y ago
    It is referencing the native Array.prototype.sort; I just wanted to make a native-only way. Yes, you can use other native methods and polyfills with the same API, for example here is a jQuery plugin for reversing elements: jQuery.fn.reverse = [].reverse;
- jeffasinger 13y ago
  This isn't entirely fair, as clientWidth isn't really the same thing as $().width().
- jackmoore 13y ago
  Since those two things aren't really the same, I'd say this is a terrible example (a strawman even). If you want the clientWidth, use the clientWidth. jQuery works in tandem with the native DOM, and is not meant to be a wholesale replacement: $("div").sort(function(a, b) { return a.clientWidth * a.clientHeight - (b.clientWidth * b.clientHeight); }); The speed for this is slower, as expected, but comparable to native. http://jsperf.com/d97b341f-cfc1-4057-bdc9-60e80adb5cf6/4 http://jsperf.com/d97b341f-cfc1-4057-bdc9-60e80adb5cf6/4
  - ivanca 13y ago
    In that context any kind of comparision would be a strawman unless is _your_ way of mixing jQuery with native code; maybe this would become more clear with different examples: #Ex. 1 $("div").map(function(){ return $(this).css('background-image'); }) "If you just want the background-image just use the get-computed-style-background-image!" [].slice.call(documents.getElementsByTagName('div')).map(function(a){ return getComputedStyle(a)["background-image"]; }); #Ex. 2 $("div").sort(function(a, b){ return $(a).find('*').length - $(b).find('*').length; }); "If you just want an algorithm that sorts the ones with the biggest amount of children and grandchildren just use an algorithm that sorts the ones with the biggest amount of children using domElement.getElementsByTagName" [].slice.call(documents.getElementsByTagName('div')).sort(function(a){ a.getElementsByTagName('*').length - b.getElementsByTagName('*').length; }); >And is not meant to be a wholesale replacement I never said such thing neither; now that is 100% a straw-man.
kbenson 13y ago
> jQuery has a considerable performance cost for the abstractions it provides ... add 500 lines of javascript code on every method call But how much does this really matter, with modern high performance JS engines? The simple (and somewhat dismissive, I'll grant you) answer is of course it comes at performance cost, and it may be considerable. Comparatively. After implementing using jQuery, if some component is too slow, optimize. Rewrite using underlying core JS if you have to. Or better yet, reexamine what you are attempting and see if there's a better way. > I very much dislike the spaghetti code that over reliance on jQuery plugins results in. You have pieces of code that rely entirely on jQuery and can't be refactored out or reasoned with clearly. It is terribly unidiomatic in any case. Can you provide some examples of what you mean by this? Especially about it being unidiomatic (programming language idioms are a topic dear to my heart :)? Personally, I find jQuery allows me to structure my javascript in a more coherent way, but that could have been greatly influenced by my relative experience with javascript before starting to use jQuery.
- ivanca 13y ago
  Search any jQuery plugin, many insert DOM and listeners that are not slightly configurable, most of them don't follow simple rules: http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/ http://coding.smashingmagazine.com/2011/10/11/essential-jque...

ivanca 13y ago

I'm with you in that argument, and here is some code to prove it; a little script that orders all 'divs' based on their size; the jQuery implementation freezes the page for a few seconds while the native one does not (Chrome 26 - i7/2.67GHz - W7 64 bits); $("div").sort(function(a, b){ return $(a).width() * $(a).height() - ($(b).width() * $(b).height()) }); [].slice.call(document.getElementsByTagName('div')).sort(function(a, b){ return a.clientWidth * a.clientHeight - (b.clientWidth * b.clientHeight) });

WesleyJohnson 13y ago
Are there speed gains to be had by wrapping the a,b elements in the jQuery example only once instead of twice? $("div").sort(function(a, b) { var $a = $(a); var $b = $(b); return $a.width() * $a.height() - ($b.width() * $b.height()); });
- Schlaefer 13y ago
  Not really: http://jsperf.com/d97b341f-cfc1-4057-bdc9-60e80adb5cf6 http://jsperf.com/d97b341f-cfc1-4057-bdc9-60e80adb5cf6
  - simonw 13y ago
    There is however a significant performance improvement to be had by optimising the inner loop, which is what any good programmer would do first here: http://jsperf.com/d97b341f-cfc1-4057-bdc9-60e80adb5cf6/2 http://jsperf.com/d97b341f-cfc1-4057-bdc9-60e80adb5cf6/2
    - k3n 13y ago
      Written sanely, it's only marginally slower; it's so close that it's inconsequential for 99% of uses.
      - ldng 13y ago
        You still have to download 81Kb of code whereas native is just that, native ;-) It's a trade-off. Depends which browser uses your target/customer.
    - Schlaefer 13y ago
      This optimization is actually replacing jQuery in the inner loop with native calls. It was my impression that the OP suggested that this could be performed more efficiently using jQuery.
euroclydon 13y ago
Can't you just use jQuery.fn.sort if you don't want the chaining and wrapper overheard that the parent mentions? And if you do, won't you benefit from native methods or polyfills with the same API? Here is what jQuery.fn.sort looks like in the console of Chrome. It appears to be referencing the native sort: >jQuery.fn.sort.toString() "function sort() { [native code] }"
- ivanca 13y ago
  It is referencing the native Array.prototype.sort; I just wanted to make a native-only way. Yes, you can use other native methods and polyfills with the same API, for example here is a jQuery plugin for reversing elements: jQuery.fn.reverse = [].reverse;
jeffasinger 13y ago
This isn't entirely fair, as clientWidth isn't really the same thing as $().width().
jackmoore 13y ago
Since those two things aren't really the same, I'd say this is a terrible example (a strawman even). If you want the clientWidth, use the clientWidth. jQuery works in tandem with the native DOM, and is not meant to be a wholesale replacement: $("div").sort(function(a, b) { return a.clientWidth * a.clientHeight - (b.clientWidth * b.clientHeight); }); The speed for this is slower, as expected, but comparable to native. http://jsperf.com/d97b341f-cfc1-4057-bdc9-60e80adb5cf6/4 http://jsperf.com/d97b341f-cfc1-4057-bdc9-60e80adb5cf6/4
- ivanca 13y ago
  In that context any kind of comparision would be a strawman unless is _your_ way of mixing jQuery with native code; maybe this would become more clear with different examples: #Ex. 1 $("div").map(function(){ return $(this).css('background-image'); }) "If you just want the background-image just use the get-computed-style-background-image!" [].slice.call(documents.getElementsByTagName('div')).map(function(a){ return getComputedStyle(a)["background-image"]; }); #Ex. 2 $("div").sort(function(a, b){ return $(a).find('*').length - $(b).find('*').length; }); "If you just want an algorithm that sorts the ones with the biggest amount of children and grandchildren just use an algorithm that sorts the ones with the biggest amount of children using domElement.getElementsByTagName" [].slice.call(documents.getElementsByTagName('div')).sort(function(a){ a.getElementsByTagName('*').length - b.getElementsByTagName('*').length; }); >And is not meant to be a wholesale replacement I never said such thing neither; now that is 100% a straw-man.

kbenson 13y ago

> jQuery has a considerable performance cost for the abstractions it provides ... add 500 lines of javascript code on every method call But how much does this really matter, with modern high performance JS engines? The simple (and somewhat dismissive, I'll grant you) answer is of course it comes at performance cost, and it may be considerable. Comparatively. After implementing using jQuery, if some component is too slow, optimize. Rewrite using underlying core JS if you have to. Or better yet, reexamine what you are attempting and see if there's a better way. > I very much dislike the spaghetti code that over reliance on jQuery plugins results in. You have pieces of code that rely entirely on jQuery and can't be refactored out or reasoned with clearly. It is terribly unidiomatic in any case. Can you provide some examples of what you mean by this? Especially about it being unidiomatic (programming language idioms are a topic dear to my heart :)? Personally, I find jQuery allows me to structure my javascript in a more coherent way, but that could have been greatly influenced by my relative experience with javascript before starting to use jQuery.

ivanca 13y ago
Search any jQuery plugin, many insert DOM and listeners that are not slightly configurable, most of them don't follow simple rules: http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/ http://coding.smashingmagazine.com/2011/10/11/essential-jque...