CODEWITHSUNDEEP
javascriptjqueryperformancerefactoring
jondavidjohn
jondavidjohn

Reputation: 62402

Most Economic Means of Improving Javascript Performance (by supplanting jQuery)

Ok, other than purchasing a beast of a machine to improve performance...

I've got a Javascript/AJAX driven web app that was written utilizing jQuery in order to speed up inital development time. I'm finding that from a performance perspective, I'm ready to begin supplanting piece by piece to improve the code efficiency.

One Example...

http://jsperf.com/innerhtml-vs-jquery

I moved away from using $(selector).text() in active areas to naitive DOM access with getElementById(id).innerHTML

I'm a little bit at a loss as to where to go next in terms of getting the most bang for my buck, what are some glaring areas where utilizing jQuery causes you to take a performance hit (outside load times)?

Upvotes: 1

Views: 163

Answers (5)

Adam Terlson
Adam Terlson

Reputation: 12730

Just based off of other folk's answers I thought I'd throw in my own two-cents on an often-quoted one. Beware browser differences in selector performance! What you think might always be fastest isn't always true!

Safest selector is of course $('#foo'), but consider the following:

$('.bar') is faster than $('#foo .bar') and $('#foo').find('.bar') in browsers that natively support getElementsByClassName(). In fact, much faster (more than twice as fast in FF and basically every browser but IE).

For proof, see jsPerf.

You might be able to do some browser-specific selector optimization.

Upvotes: 0

mozillanerd
mozillanerd

Reputation: 560

Try other frameworks. See this comparison where DOJO wins: http://blog.creonfx.com/javascript/dojo-vs-jquery-vs-mootools-vs-prototype-performance-comparison I like all the pointers given above and found Jose Vega's to work well.

Upvotes: 1

csharpnumpty
csharpnumpty

Reputation: 3723

$.each loops, where the loop is particularly large. If it's small, the difference is negligible, but the performance of a traditional JavaScript for loop is much better, particularly when dealing with large amounts of data.

Also, it's not specifically what you asked for - but revisit all your selectors when utilizing events, particularly for IE which has no support for "getElementsByClassName" (Lots of other browsers do) and prefix any class names used in event wire-ups with an ID, where possible. I found this improved IE performance, particularly when combined with removing context-less pseudo-selectors like $(":input")

e.g.

$(".etc").live("click", function() { } );

becomes

$("#id").delegate(".etc", "click", function() { });

Upvotes: 0

Jose Vega
Jose Vega

Reputation: 10258

jQuery Performance Rules

  1. Use Tags Before Classes
  2. Cache jQuery Objects
  3. Harness the Power of Chaining
  4. Use Sub-queries
  5. Limit Direct DOM Manipulation
  6. Leverage Event Delegation (a.k.a. Bubbling)
  7. Eliminate Query Waste
  8. Defer to $(window).load
  9. Compress Your JS
  10. Learn the Library
  11. Always Descend From an #id

These are the key areas, that I always keep in mind when using jQuery.

Upvotes: 3

Andrew
Andrew

Reputation: 13853

Any jquery custom selector, i.e. something that is not native to the browser, will be orders of magnitude slower. so doing

$('.sharedclass').find('crappyselector');

will speed up long searches.

Also insertion, if you are ever doing insertion in a loop(i.e. a table), build a string first then insert all at once.

Those are the 2 big ones I run into.

Also, profile profile profile. There is no point in fixing something that isn't a problem.

Upvotes: 1

Related Questions