Slides from JSConf

April 28th, 2009. Tagged: JavaScript, performance, speaking

I'm back from the most excellent JSConf (JavaScript Conference) in Washington D.C. I'm tired and need sleep but the conference was, hands down, the best conference I've ever attended. It was all about the community, it was inexpensive, with parties all around, both speakers and attendees were treated exceptionally well, in fact there wasn't a big difference since attendees presented just as good content on the B-track as did the A-track.

Here are my slides, "High Performance Kick Ass Web Apps (the JavaScript edition)". I changed the slides on the night before the presentation (and after the first night's party). The thing is that I was halfway through the slides and approaching 90 slides and I realized there's no way I will deliver so much content. One day... I'll prepare my slides way in advance and will actually practice delivering the talk...

Tell your friends about this post: Facebook, Twitter, Google+

11 Responses


  1. var t2 = +new Date();
    var getEl = document.getElementsByTagName;
    for (var i=0; i<10000; i++) {
    getEl('head');
    }
    document.write(+new Date() - t2 + '');

    It seems doesn’t work for me, reports error in Firefox 3.0.10, and costs 4 times slower in IE8.

  2. Great presentation!
    WebWorkers look very interesting. There is fresh working draft:
    http://www.whatwg.org/specs/web-workers/current-work/

  3. On Frame 70 would this not be the better code?

    function foo(){
    var theHead = document.getElementsByTagName(‘head’)[0];
    for(var i=0;i<100000;i++)
    //don’t look up the HEAD element again… we already have it!
    //do stuff…
    theHead.appendChild(…);
    }
    }

    foo();

    If I read your slide correctly, you are still “looking up” the element on every loop, you’ve just limited the length of the name of the function you are calling. ;-)

    Or am I missing something?
    Steve

  4. Steve, you’re right, I’m still looking up the element, but the idea was that I’m no longer looking for what’s document and does it have an getElementsByTagName method.

    chencheng, that’s weird. I tested FF3.0.9, I wonder if something changed. I also used the profilers in IE8 and Firebug to take measurements, didn’t use new Date(). And last, I ran this code against a simple page (google.com), I wonder if you used a real page to test or created a blank file.

  5. [...] Read the original:  Slides from JSConf [...]

  6. [...] http://www.phpied.com/slides-from-jsconf/ : les slides d’une présentation de Stoyan Stefanov, qui couvre bien les techniques d’optimisation du javascript. [...]

  7. 高性能的 WEB 应用…

    从 phpied.com 上看到了一个很好的幻灯片,里面讲了一些提高页面性能的技巧,主要是针对JS, CSS 等前端技术,比如减少 HTTP 请求等,值得一看。
    幻灯片地址:High Performance Kick Ass Web Apps (JavaScrip…

  8. Nice presentation, but I’ve got a question, on frame #45 you say create a script tag via the DOM avoid to block the load of other elements, but what do you think of doing thins like this (put script tag at the really end of body) :


    ...
    ...
    ....

    ?

  9. Sorry my comment was broke by WordPress, I wanted to post an example, like this one :


    <!doctype html>
    <html>
    <head>
    <!-- meta tag, link tag goes here -->
    </head>

    <body>
    <!-- content goes here -->
    ...
    ...
    ...
    ...

    <script src="all.js" type="text/javascript"></script>
    </body>
    </html>

  10. Hmm… inexpensive? Our slovenian PHP conference costs only 97$ for 2 days :)
    Btw, what Steve said doesn’t work for me either.

  11. @Stoyan

    The var get = document.getElementsByTagName gives a errors indeed in Firefox. You can get around it by doing:

    get.call( document, ‘head’ );

Leave a Reply