Home > jquery > jQuery Anti-Patterns for Performance

jQuery Anti-Patterns for Performance

September 11th, 2009
  1. September 12th, 2009 at 15:25 #1

    Nice presentation dude. Great slides.

    Wish I coulda been there to see it in person!

  2. Pablo
    September 12th, 2009 at 18:39 #2

    Big Loada!

  3. bganicky
    September 13th, 2009 at 09:49 #3

    Thanks for nice slides. Nice tip/trick on slide 36…in need of this right now. :)

  4. seutje
    September 14th, 2009 at 03:08 #4

    too bad I couldn't be there :'(

  5. September 14th, 2009 at 12:29 #5

    @Pablo, Hah! thank you for getting the reference. :) Craig David and Squarepusher ref's on a talk about selectors is just.. a must do!

  6. September 17th, 2009 at 12:11 #6

    So in general my recommendation was to not use the context argument for any perf advantage, I only see it useful as a shorter way of writing $(this).find(…

    But Yehuda Katz mentioned that it has a decent use in live() in jquery 1.3.3:

    $("td", "table").live(…
    will scope the delegation to existing tables

    I have yet to do some performance testing on this. But this may be worth considering.

  7. dizzley
    October 6th, 2009 at 02:25 #7

    Paul, thanks for a fascinating presentation. I wish I could have heard you too. I'm just getting into jquery so it was illuminating. It brought back some of my best programmer's instinct. :)

    …and I've picked up your RSS feed!

  8. November 17th, 2009 at 17:54 #8

    Great presentation Paul! My fav slide is #54 — All that expression'y goodness! :D

  9. Prestaul
    December 8th, 2009 at 16:37 #9

    @Paul:

    $('td', 'table').live(...

    will not be scoped to tables, because the context of the resulting jQuery object is still the document. To change the context you have to pass an actual DOM node.

    $('td', 'table').context; // => document
    $('td', $('#mytable')[0]).context; // => table node

    I think we're going to be seeing a lot of code like this when v1.4 hits the shelves:

    var table = $('#mytable')[0];
    $('td', table).live(...
  10. January 15th, 2010 at 10:51 #10

    Prestaul, you are 100% correct.
    This definitely lends to some odd looking code, but yah right now that's the best way…

  11. Aleksandr Motsjonov
    February 14th, 2010 at 08:35 #11

    Very-very nice and usefull. I take couple of your recepies. Thank you.

  12. Kailden
    June 15th, 2010 at 11:31 #12

    This is a great presentation. Thanks!

  13. August 5th, 2010 at 13:08 #13

    Looks like the slides are down :(

  14. idbentley
    October 8th, 2010 at 08:02 #14

    Hi Paul,

    On slide 31, you say: "a flatter DOM helps, so move to HTML5". Is there a particular reason that HTML5 will lead to a shallower DOM? Is it simply that HTML5s new features allow us to use less markup to achieve the same effect?

    Thanks,
    idb

  15. October 9th, 2010 at 10:35 #15

    @idbentley
    Basically yup.

  16. November 2nd, 2010 at 14:01 #16

    Here's the video for those interested – http://ontwik.com/javascript/jquery-anti-pattern-for-performance/

    Good presentation – introduced me to document fragments.

  17. March 21st, 2011 at 15:11 #17

    I think the selector should come first in delegate (for your example in the slides)?

    http://api.jquery.com/delegate/

  18. alkos333
    March 30th, 2011 at 18:11 #18

    @Brandon

    Yes, you are right.

  19. alkos333
    March 31st, 2011 at 18:17 #19

    Doing this:

    $divisions = $("#divisions").find("ol");
    $divisions.delegate("li", "click", fn);

    Classifies "li" asevents as indicated by Firebug, which does not make sense because "li" is a selector and "click" is the event type, not the other way around.

  20. July 17th, 2011 at 23:23 #20

    Great!! Squarepusher & jQuery, too sexy…

  21. September 8th, 2011 at 11:32 #21

    I know that this video is old, but I want to put one more nice and useful (for me at least) comment trick — switching between two blocks of code:

    /**/
    uncommented code
    /*/
    commented code
    /**/

    put an space (or delete the slash) and you have

    /** /
    commented code
    /*/
    uncommented code
    /**/
  22. September 8th, 2011 at 11:35 #22

    P.S. This code highlighter doesn't work as expected, but the trick works.

  23. November 30th, 2011 at 12:33 #23

    Great tips !! I will certainly be using createDocumentFragment whenever possible.

    Any relevant updates regarding the latest versions of jquery ?

  24. February 1st, 2012 at 04:26 #24

    wowwww……..Great….great great…..Background canvas drawing was excellent…
    thanks…

  25. Lcornejo
    April 25th, 2012 at 17:05 #25

    Excelente presentación. Esos script ayudan bastante.
    Gracias…

  1. October 1st, 2009 at 13:17 | #1
  2. November 19th, 2009 at 15:11 | #2
  3. December 4th, 2009 at 11:05 | #3
  4. February 13th, 2010 at 16:39 | #4
  5. June 29th, 2010 at 10:17 | #5
  6. July 2nd, 2010 at 14:44 | #6
  7. July 19th, 2010 at 22:50 | #7
  8. July 26th, 2010 at 07:20 | #8
  9. December 22nd, 2010 at 19:53 | #9
  10. April 24th, 2011 at 09:24 | #10
  11. August 8th, 2011 at 07:28 | #11
  12. September 21st, 2011 at 04:18 | #12
  13. December 2nd, 2011 at 07:07 | #13
  14. January 30th, 2012 at 03:28 | #14
  15. February 9th, 2012 at 20:34 | #15
  16. April 23rd, 2012 at 00:39 | #16

For code blocks, use <pre lang="javascript">. css and html4strict are also accepted.