Extreme JavaScript Performance
videos

Extreme JavaScript Performance

on Oct 29th 2010 with 23 comments
Tutorial Details
  • Topic: JavaScript
  • Difficulty: Intermediate

Just because you didn’t get to go to that awesome conference doesn’t mean that you can’t still watch the lectures! Each weekend, we’ll feature a recommended web development lecture on Nettuts+.

In this talk, hosted by Thomas Fuchs at JSConf, he reviews a handful of tweaks that can be made to your JavaScript to drastically improve performance (at least in terms of percentages). Along the way, he covers why you shouldn’t pre-optimize your code, how each browser’s JavaScript engine excels in different areas, and even how simple things, such as reordering your expressions can increase performance by a significant amount.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi, I'm Thomas. I'm the author of script.aculo.us, the JavaScript user interface library.I'm also a core member of the Prototype JavaScript framework and a Ruby on Rails core alumnus. I write about all things web at mir.aculo.us.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://bit.ly/cLZXGi Julian

    Sweet! Thanks for sharing!

  • Alexandre Bars

    Thanks, Firefox 4 seems to regain some new share!!

  • http://www.jsxtech.com Jaspal Singh

    Thanks for sharing article on Javascript.

  • http://laroouse.com piyansitll

    very nice post thanks a lot

  • http://www.how-to-asp.net Ryan

    Great stuff, thanks for sharing!

  • http://www.webdesignerhouston.com Houston SEO Company

    Hey thanks for this nice information. The information is really awesome.
    JavaScript can be used to drastically improve performance. Even by reordering our expressions.
    Thanks for sharing these tuts.
    Really liked it.!!!
    Do keep posting…..

    • http://www.blackleafmedia.com/ Patrick

      Anyone else notice a bit more of these “fluff” replies from SEO companies? At least _try_ and add something to the conversation.

      • http://jessewilliamson.net Jesse

        Great observation. Thanks for sharing. ;-D

        Seriously, though, way to call them out on that garbage.

  • http://www.dz-tchat.com algerianTic

    Thanks for sharing article

  • http://oneofthesedaysblog.com Sam Dalton

    The 34 minute presentation could have been condensed into a single slide : “Different browsers perform differently for different operations”.

    Of course using a try/catch block will be slower than not, of course unrolling a loop will be faster than not. But in each case, there are reasons for using both so comparing their execution time offers little value.

    Premature optimisation is certainly not good to do, but sacrificing function calls and built in language features for milliseconds of non-statistically credible performance improvements is exactly that. The suggested code alternatives are not just optimisations, but they’re a significant step backwards from readable and manageable code.

    • http://www.blackleafmedia.com/ Patrick

      Agreed. Something is to be said for optimization, but as time goes on, readability for the developer is important. Look at OOP. It is generally more code to the same thing, however, it generally makes for easier to read code. It certainly is something that needs to be decided on a case by case basis.

    • AJ

      I think he said that you should start out by writing your code to be readable and manageable, and then optimize. Readability is key for developers, not for end users.

    • Diego Crusius

      Interesting line of thought. Maybe this whole thing is actually aimed for beginners, like me, as I found it quite interesting and useful.

      not that I disagree with you, I actually don’t. Some stuff seemed really obvious, like you stated. The question is: what do we do with that gathered data? Asking the right question also works, since the author did what I consider the right thing to go and test each thing on each browser, which is something I actually do and found vital for adding some features.

  • http://brianswebdesign.com Brian Temecula

    Hey, I’ve tried a couple of browsers on my Mac, and I can’t see a video up there in that big black box….

  • http://www.jakswebdesign.com Adam Jenkins

    Stellar choice for a video post. Thanks net tuts!

  • http://www.darrenmcpherson.co.uk Darren McPherson

    Sounds like Arnie.

    Thanks for sharing!

  • http://twitter.com/_shahz Shahzeb

    HAHA epic funny fail with the clapping broski.

  • http://www.colddesign.it Giacomo Colddesign

    Really interesting.. thanks!

  • http://www.esouls.net Reihaan

    Really nice tutorial.Thanks

  • neimad

    . He says make your code readable, but then busts out with ~~(1 * “12.5″) instead of parseInt(12.5) – for one, he doesn’t include the radix ; parseInt(12.5, 10) – this is a big problem for noob coders, and an egregious error for an experienced coder. His optimization is also far less readable for a marginal performance gain.

    He also doesn’t use curly brackets in his for loop examples, which makes the code far less readable, and really saves nothing on performance or code size. Even though ‘unrolling loops’ does give a performance benefit, this should only be used in the most extreme cases, and I can’t really think of any good case for this in my 16 years of browser programming.

  • http://www.nfopic.com Jay

    Nice one, just learning JavaScript and filling my brain with as much video content & tuts as possible.
    Hope to use some coolness on my new App http://NfoPic.com

    Cheers,
    Jay – PxldIn

  • SalmanAbbas007

    haha right after he links to John Resig’s Blog, he uses the arguments.callee property which is deprecated (and its described in that blog post) XD

  • http://muraliprashanth.me Murali Prashanth

    very nice Thanks…