search

resource / Front-End-Standards

Front-end development standards for Resource.
MIT License
23 stars 1 forks source link

Sizzle and Speed #32

Closed mrbinky3000 closed 11 years ago

mrbinky3000 commented 11 years ago

You know, I actually re-factored some code the other day to speed it up and according to the sizzle section, the way I re-factored it is "bad". It may be bad, but it's the fastest way to do it. :-) Perhaps rethink that section.

Using $('.sidebar').find('ul') is faster than $('.sidebar ul')

caching is faster, of course. Just trying to point out that .find() is faster than a compound selector.

See this link.

http://jsperf.com/sizzle-test-2

mrbinky3000 commented 11 years ago

Also this: http://jsperf.com/specific-css-selector-vs-find

markisadesignerd commented 11 years ago

Can someone explain why .find() is faster than .children() ?

markisadesignerd commented 11 years ago

Aaaand here we go: http://stackoverflow.com/a/7692401/1086040

children() [only] begins to outperform find() when there are over 100 levels of nesting and around 4000+ divs for find() to traverse.

http://jsperf.com/jquery-children-vs-find/8

http://jsperf.com/specific-css-selector-vs-find

LukeAskew commented 11 years ago

The jQuery doc is super immature at this point.

Feel free to make modifications as needed.

I believe I lifted these sections out of the main JavaScript doc early on when I realized we should have a separate doc for jQuery.

Please add any contributions and we can pare down and refine as needed.

nicetransition commented 11 years ago

But that sounds like a specific example, though a good one.

You could just add a class/id to the <ul /> then use that selector in $(" selector ")

nicetransition commented 11 years ago

jQuery section is super light right now, it'd be great to inherit/reference the now matured JavaScript.md

LukeAskew commented 11 years ago

@kevinmack18, right. Just trying to show the different ways jQuery allows you to select elements, and the way that we prefer for consistency sake.

nicetransition commented 11 years ago

gotcha.

mrbinky3000 commented 11 years ago

Heh... straight from codeschool.com (tee hee) image

nicetransition commented 11 years ago

Here's a question... which is faster?

    $("#parent .descendent, .another-selector")...
    // OR
    $("#parent").find(".descendent")...
    $(".another-selector")...

When the "..." are attached the same functionality/methods/etc

mrbinky3000 commented 11 years ago

I honestly think $.find() wins. It seems that all of the traversal functions, $.first(), $.last(), $.find(), $.children() etc are varying degrees faster than a compound selector. My test even show that $('namespace').find('complex selector') is still faster than $('complex selector')

nicetransition commented 11 years ago

Even if there are 2+ ?

LukeAskew commented 11 years ago

@mrbinky3000 Can you rework the standard and maybe add some links?