JQuery Performance Tips Cheat Sheet
dumitruglavan.com
JQuery Performance Tips Cheat Sheet
1–10 of 24 posts
Re: JQuery Performance Tips Cheat Sheet
#2The #id selector performance tip is definitely true, but in single-page interface you never know which DOM elements may be floating around on a page, which would go against the one id per page principle.
Re: JQuery Performance Tips Cheat Sheet
#3is it just me or are half of these 'tips' about caching the selector results?
Re: JQuery Performance Tips Cheat Sheet
#4Generally very good advice. One thing I notice a lot is people using .live() instead of just relying on event delegation. Using .live() can be terribly inefficient as it binds to the root node, use .delegate() or .on() (in jQuery 1.7) instead.
Re: JQuery Performance Tips Cheat Sheet
#5It would be nice to see measurements on how much less time and memory the more performant techniques take compared to their less performant counterparts in realistic scenarios. Doing so might indicate a better ranking of the tips given. For example, the DOM insertion tip -- which drastically improves performance over the naive implementation -- is tip 9, and is probably far more useful than tips 4 (Optimize selectors for Sizzle’s ‘right to left’ model) and 5 (Use find() rather than context).
Re: JQuery Performance Tips Cheat Sheet
#6Man... this is full of crazy talk:
For better performance you can use direct functions like $.ajax() than $.get(), $.getJSON(), $.post() because the last ones are shortcuts that call the $.ajax() function.
I've never written an app where the overhead of $.getJSON has been any kind of bottleneck.
Don’t forget about using .data() function to store stuff for your elements
How is this a performance tip?
Sometimes it’s faster to use $(window).load() than $(document).ready() because the last one occurs before all the DOM elements are downloaded
Say what?
If you want to save some bits on compressing your js plugin – replace the $(document).onready() event
Saving bits! The favorite optimization bikeshed of the JavaScript glitterati.
The best way to test a Javascript code is the human way :D But, you still can use some automated tools like Selenium, Funcunit, QUnit and QMock to test your code
I hope this is a joke.
The new HTML 5 standard comes with a lighter DOM structure in mind
What?
When styling a few elements it is best to simply use jQuery’s css() method, however when styling 15 or more elements it is more efficient to append a style tag to the DOM.
Or, if you're worried about performance and reusability, you could use classes and use addClass and removeClass.
Re: JQuery Performance Tips Cheat Sheet
#7Man... this is full of crazy talk: For better performance you can use direct functions like $.ajax() than $.get(), $.getJSON(), $.post() because the last ones are shortcuts that call the $.ajax() function. I've never written an app where the overhead of $.getJSON has been any kind of bottleneck. Don’t forget about using .data() function to store stuff for your elements How is this a performance tip? Sometimes it’s fa…
You forgot my personnal favorite :
"Lazy load content for speed and SEO benefits"
This guy either works at Google or doesn't have a clue of what he's saying. SEO is already black magic. That kind of claim requires heavy evidence which are simply not there.
Re: JQuery Performance Tips Cheat Sheet
#8Man... this is full of crazy talk: For better performance you can use direct functions like $.ajax() than $.get(), $.getJSON(), $.post() because the last ones are shortcuts that call the $.ajax() function. I've never written an app where the overhead of $.getJSON has been any kind of bottleneck. Don’t forget about using .data() function to store stuff for your elements How is this a performance tip? Sometimes it’s fa…
yeah, lots of misinformation in the article :(
Re: JQuery Performance Tips Cheat Sheet
#9Man... this is full of crazy talk: For better performance you can use direct functions like $.ajax() than $.get(), $.getJSON(), $.post() because the last ones are shortcuts that call the $.ajax() function. I've never written an app where the overhead of $.getJSON has been any kind of bottleneck. Don’t forget about using .data() function to store stuff for your elements How is this a performance tip? Sometimes it’s fa…
You forgot my personnal favorite : "Lazy load content for speed and SEO benefits " This guy either works at Google or doesn't have a clue of what he's saying. SEO is already black magic. That kind of claim requires heavy evidence which are simply not there.
Hardly black magic. But there has been a lot of theories tossed around about page load speed influencing rankings. So it's understandable why he things that -- and google's addition of page speed to analytics hasn't helped stop the myth. Unfortunately, there's not a lot of solid evidence about it (yet).
Re: JQuery Performance Tips Cheat Sheet
#10This is nice:
15. Add a JS class to your HTML attribute Firstly, as soon as jQuery has loaded you use it to add a “JS” class to your HTML tag.
1 $('HTML').addClass('JS'); Because that only happens when javascript is enabled, you can use it to add CSS styles which only work if the user has JavaScript switched on, like this…
1 /* In your css */ 2 .JS #myDiv{display:none;} So, what this means is that we can hide content when JavaScript is switched on and then use jQuery to show it when necessary (e.g. by collapsing some panels and expanding them when the user clicks on them), while those with JavaScript off (and search engine spiders) see all of the content, as it’s not hidden. I’ll be using this one a lot in the future.
http://www.learningjquery.com/2008/10/1-way-to-avoid-the-fla...