YUI Theater — Joseph Smarr: “High-Performance JavaScript: Why Everything You’ve Been Taught is Wrong”

By Eric MiragliaAugust 29th, 2007

Joseph Smarr is the Chief Platform Architect at Plaxo, Inc., where he’s led the engineering of Plaxo’s address-book integration application. In the course of building Plaxo 3.0, which involved an ambitious foray into rich internet application design, Joseph and learned a host of lessons about the importance of performance and the means by which it can be achieved. Many of those lessons (“premature optimization is the root of all evil”) will be familiar. But some run contrary to what are commonly thought of as best practice in frontend engineering — for example, the Plaxo team found that in some cases they could achieve substantial gains by attaching event handlers inline using DOM level 0 syntax (e.g. <div onclick="someGlobalFunction();">) rather than attaching them via DOM level 2′s favored addListener.

In sum, Joseph argues for a four-point approach to achieving maximum performance in your web-app:

  • Be lazy: Don’t load or do things before you need to; maybe you won’t need to load or do them at all.
  • Be responsive: Make things happen quickly. If you can shave 100ms off of an interaction by responding to a mousedown event instead of a click event, do it.
  • Be pragmatic: Frontend engineering is hard enough. Don’t make it harder than it needs to be.
  • Be vigilant: Blank web pages are fast. Web pages become slow because you put stuff in them; slowness is your resonsibility. Vigilance is required to prevent slowness.

Joseph visited Yahoo! this week to reprise his recent talk from OSCON in which he enumerates these lessons and fleshes them out with practical detail and the wisdom of experience. Our thanks to Joseph for the visit and for allowing us to share his presentation publicly on YUI Theater.

This video is available in Flash format on Yahoo! Video and as an MPEG-4, iPod-compatible (and iPhone-compatible!) download (change the extension from .m4v to .mp4 if your video software doesn’t recognize the extension).

Joseph also features in a video this week from the ScobleShow on PodTech (iPod compatible download), where he discusses some upcoming Plaxo features including an online identity aggregator based on microformats.

In Case You Missed…

Some other recent videos from the YUI Theater series:

28 Comments

  1. I don’t think I’ve ever read or ever thought that using addListener was faster than onclick=”". Speed, in that case, is not the point. The point is maintainability. It’s far easier to change one JS file in the background than edit dozens of HTML files or dynamically-generated templates.

    If I’m writing a Java application and I want to shave miliseconds off of my response times, I can hardcode my UI logic into my business objects rather than abstract them out into something closer to Model-ViewController. Is it a good idea? No. Not generally. The same applies to HTML and Javascript.

    Now, if a developer happens to come up against slow JS response time, it’s probable that they’ve overbuilt and overthought the problem. Do you really need a JS handler on every button, or animations at every turn? At this stage, with the current state of JS in the browser field, that’s just not practical. If you really need that level of dynamic-icity (dynamicness? dynamism?), maybe your application would be better suited for the desktop rather than the web.

  2. [...] When we got back to Silicon Valley, Steve said “let’s do lunch at Yahoo! some time”. So I went over on Monday and had lunch with him and JavaScript guru Doug Crockford (also at Yahoo!). Doug is actively working on how to enable secure cross-site mashups, something near to my heart, so we had a great discussion. When we were coordinating lunch plans, Steve had said ”hey Joseph, as long as you’re coming over, why not give your talk at Yahoo!, and I’ll give mine again, and we can put them both up on YUI Theater“. And that’s just what we did! [...]

  3. [...] YUI Theater — Joseph Smarr: “High-Performance JavaScript: Why Everything You’ve Been Taught is… (tags: performance presentation video javascript optimization yui dom best-practices)     Read More    Post a Comment [...]

  4. “Blank web pages are fast.”

    Fast to develop, fast to serve, and fast to read. Sounds optimal. Am I obsolete? :)

  5. [...] texto original e vídeo estão disponíveis no artigo “High-performance Javascript”  Gostou deste post? Se você ainda não assinou meu RSS, obtenha-o aqui. E se [...]

  6. Patrick Whittingham said:
    August 30, 2007 at 11:46 am

    Joseph -

    Very good talk about JavaScript performance / frameworks. I don’t use a given framework (ie., DOJO), but take the good ideas into my ‘small’ external JavaScript files. I wish some wrote a C#/C++/Java program which would combine all of my external JavaScript files into 1 file and delete any functions not being used on a given page. This would make things alot faster.

  7. If you’re attaching event handlers to a large number of elements, then onxxxx attributes can be quite a bit faster than DOM methods.

    But an even bigger win is to simply install fewer event handlers. Often the best way to do that is to take advantage of event bubbling.

    A recent example was on the jQuery mailing list. A fellow developer had a page with 500 items that each had “yes”/”no” buttons. His code was attaching click event handlers to every one of these buttons. (This is where jQuery’s ease of coding can sometimes bite you. It’s so simple to attach event handlers to a whole class of elements that you don’t really notice how much work is going on behind the scenes.)

    Instead, I gave him some code that attached a single click event handler to the parent form and then checked event.target to see which of the buttons was being clicked. The code was just as simple and much faster.

    When you’re only attaching a single event handler, you can afford to do it in the cleanest way.

  8. A few people have brought up event-bubbling as a way to avoid attaching lots of handlers, and here are my thoughts on that: in theory, it can be a great way to handle things, but we found it’s often tricky to correctly identify the true source of the event, esp. when e.g. you have a button that’s composed of multiple DIVs, so you have to know that “any element in that button structure means the user wants to perform such-and-such action”. There’s also the problem that sometimes you want to cancel the bubbling of an event part-way up the chain (e.g. to distinguish clicking on a link/action vs. in blank space to bring the module to the top), so if you want for it to get to the top to handle it, it may never get there. I never noticed much performance penalty when injecting the onclick=”handleEvent(123)” into the innerHTML, but that doesn’t mean bubbling might not be a cleaner solution in many cases. Thanks, js

  9. [...] YUI Theater — Joseph Smarr: “High-Performance JavaScript: Why Everything You’ve Been Taught is… (tags: javascript performance) [...]

  10. “I wish some wrote a C#/C++/Java program which would combine all of my external JavaScript files into 1 file and delete any functions not being used on a given page. This would make things alot faster.”

    In theory, you could do this with a pretty simple php program. In your HTML you use a tag like -script src=’…jsfunctions.php?page=mypage’ type=’text/javascript’- and then maintain a registry of which JS functions need to be included on which pages and have it selectively return just those functions.

    I imagine that would be quite powerful in combination with YUI 2.3′s dynamic JS loader.

  11. [...] YUI Theater ? Joseph Smarr: ?High-Performance JavaScript: Why Everything You?ve Been Taught is Wrong…Video of Joseph Smarr’s talk on High-Performance JavaScript. [...]

  12. [...] YUI Theater — Joseph Smarr: “High-Performance JavaScript: Why Everything You’ve Been Taught is… (tags: javascript performance video optimization yui programming presentation web **) [...]

  13. [...] Platform Architect at Plaxo, Inc. I don’t know if he said this exactly, but according to the YUI Blog: Blank web pages are fast. Web pages become slow because you put stuff in [...]

  14. [...] YUIBlog at Yahoo have a nice video on Joseph Smarr from Plaxo talking about javascript best practices. I have been saying for a long time that it is not always good to code javascript in a strictly OO fashion, but instead use namespaces for protection. In some places it is good, but the mindset with javascript should be that “How can I solve this with the fewest lines of code” and not “How can I solve this the most ‘beautiful’ way”. [...]

  15. [...] procura soluções para melhorar a performance de aplicações escritas em ajax, veja este video de Joseph Marr publicado no Yahoo Interface [...]

  16. [...] YUI Theater — Joseph Smarr: “High-Performance JavaScript: Why Everything You’ve Been Taught is… [...]

  17. [...] Joseph Smarr gave a talk at Yahoo! with a pretty provocative title: High-Performance JavaScript: Why Everything You’ve Been Taught is Wrong. [...]

  18. Excellent presentation Joseph, thanks for sharing.
    Will have to check out Plaxo now :)
    C

  19. [...] through all 90 minutes of my presentation and claims to be one of my 5 readers, pointed me to this presentation by Joseph Smarr of Plaxo at Yahoo! Again, Yahoo! is doing awesome work in the performance space, and their contributions to [...]

  20. Bless you Joseph and YUI for publishing this. I’ve been having suspicions and feelings about ajax development as well for a while but never had the vocabulary quite right or more time in the game to put it to words. (The event bubbling technique is worth its salt though, the less dom event handlers the better). Well done! Great thing you got the app released and revealed some pitfalls as well.

    To get a bit more specific, did you find that oop programming in JavaScript is best in moderation or very little? i.e use of classes, private variables, closures, etc? That implementing these non-native, syntatically adapted constructs resulted in code bloat?

  21. [...] Smarr gave this great talk [~50mins] at Yahoo, which contradicted many myths that I had about ‘what is right’ in [...]

  22. [...] YUI Theater — Joseph Smarr: “High-Performance JavaScript: Why Everything You’ve Been Taught is… (tags: javascript) [...]

  23. [...] Antwort kommt von Joseph Smarr, der bei Yahoo eine Präsentation über das Thema “Erreiche [...]

  24. [...] a well-known expert on JavaScript best practices – you can see the talks he gave at Mozilla and Yahoo! on JavaScript performance. SHARETHIS.addEntry({ title: “3 JavaScript Gurus”, url: [...]

  25. [...] a session filmed at MIX08 along with Alex Russell (of Dojo and SitePen) and Joseph Smarr (of Plaxo; Joseph also appeared on YUI Theater talking about performance last year). At MIX08, we were lucky enough to get three of the world’s top JavaScript experts to talk [...]