Comments on: 101 on jQuery Selector Performance

By: IE Compatibility View: How to identify performance problems between IE versions Application Performance, Scalability and Architecture – The dynaTrace Blog

Thu, 22 Jul 2010 13:17:15 +0000

[...] on elements identified via their class name or complex lookups with parent->child relations. I wrote an article that explains the performance implications of these lookups and listed other JavaScript/AJAX [...]

By: How to identify IE Add-Ons such as Skype that impact Web Site Performance Performance, Scalability and Architecture – Java and .NET Application Performance Management (dynaTrace Blog)

Mon, 12 Jul 2010 19:12:42 +0000

[...] Add-Ons like Skype have to iterate through the DOM whenever a page is loaded or modified. The time it takes to iterate the DOM depends on the size of the DOM. That explains why those Add-Ons don’t have the same web site performance impact on every page as it depends on the number of DOM elements. It is a general JavaScript/AJAX Best Practice to limit the number of DOM elements as there are many other implications with large DOM trees, e.g.: Impact on CSS Selector Performance. [...]

By: Hands-On Guide: Verifying FIFA World Cup Web Site against Performance Best Practices Performance, Scalability and Architecture – Java and .NET Application Performance Management (dynaTrace Blog)

Fri, 04 Jun 2010 14:38:36 +0000

[...] I already blogged about different best practices on things like correct usage of CSS Selectors with jQuery and Prototype and showed the performance impact of bad JavaScript code and incorrect jQuery usage by [...]

By: olivvv

olivvv — Wed, 19 May 2010 10:00:03 +0000

*2500 nodes

By: olivvv

olivvv — Wed, 19 May 2010 09:16:22 +0000

At 2500 a sizzle request based on a classname, without context, (e.g $(‘.someClass’)) takes around 200 ms in IE7 for our app. Results should still be similar for IE8.

However optimised sizzle can be, for such a request it has to iterate through the dom and check classnames.

This is simply a too expensive operation, especially in the case of real webapps. So it is now in our guidelines that such a sizzle request is forbidden.

I think it is always possible to replace such a request, by proper node caching,or by using getElementById instead (which at least 100 times faster) or by going intensively on Event Delegation. Yes the best selector optimisation technique is : “avoid class-based selectors”. It is not a simple question of syntax, but more of software design.

I “love the jQuery”, but IMO the basic pattern of jquery -select-traverse-modify- is really showing its limits under the dual pressure of bigger webapps and use by less knowledgable coders.

By: Andreas Grabner

Andreas Grabner — Thu, 15 Apr 2010 21:51:49 +0000

@Paul: great slides – thanks. The general problem that I highlight here is the lack of IE to query elements by class name. Even though jQuery is a great framework with constant performance improvements the lack of IE functionality just kills performance if you execute certain selectors. But thanks to guys like you that highlight best practices people will learn how to write better performing web sites

By: Paul Irish

Paul Irish — Thu, 15 Apr 2010 19:59:48 +0000

jQuery 1.1.4 had a *completely* different selector engine than whats in 1.3+. Performance advice was basically flipped on its head when Sizzle landed.

For some guidance on what helps now, check slides 21-33 of
http://paulirish.com/2009/perf/

By: Web Performance Best Practices: How masters.com re-designed their site to boost performance – and what that re-design missed Performance, Scalability and Architecture – Java and .NET Application Performance Management (dynaTrace Blog)

Mon, 05 Apr 2010 15:01:32 +0000

[...] blogged about that many times – are expensive CSS Selectors. Check my recent blog about 101 on jQuery Selector Performance to get background information on this problem. The following screenshot shows me the top CSS [...]

By: dynaTrace AJAX Edition 1.6 available for public download Performance, Scalability and Architecture – Java and .NET Application Performance Management (dynaTrace Blog)

Tue, 09 Mar 2010 15:06:05 +0000

[...] CSS Lookups: 101 on jQuery Selector Performance, 101 on Prototype CSS [...]

By: as

as — Tue, 02 Mar 2010 05:33:13 +0000

thnaks