Performance difference in JavaScript

LearningjQuery has an interesting article about different speeds of show and hide html elements.

From fast to slow:

  • Enabling/Disabling a stylesheet
  • .css(‘display’, ”), .css(‘display’, ‘none’)
  • addClass(), .removeClass()
  • .show(), .hide()
  • .toggle()
  • jQuery toggle seems to fail pretty bad speed wise, while the “Enabling/Disabling a stylesheet” seems to be such an usual approach and probably make it confusing to a lot web develoeprs (yours truly included: would have said WTF if hadn’t read the article).

    I’d go with .css(‘display’, ”), .css(‘display’, ‘none’) in the case where performance is important (i.e. multiple, alot of layers to be hidden or shown), and in other case, .show()/hide() or even toggle() seems to be fine to me. “Program Readability” > “Performance” in a lot of situations.

    2 thoughts on “Performance difference in JavaScript”

    1. hey Vincent, I’m the articles author and I’d have to say that I concur with your conclusions. In a real web
      app or site, I’ve never actually had to use enabling or disabling of a stylesheet before, but since it was so much more performant, I added it to the article. I use toggle when the situation calls for it, even if it is the slowest method it is often fast enough. Cheers.

    2. Thanks for dropping by Josh. Yes I agree with you completely. Your article does bring up the importance of JavaScript performance: because a lot happens at the client side on varying browsers, speed is a concern. I have had some slower browsers hang when running some heavy JavaScript (hello IE I’m talking to you).

      I guess the key question is “how slow is too slow?”

    Leave a Reply