zoloft pills

jQuery Conference 2010: Key Takeaways

The past weekend is all about jQuery, JavaScript and web development.

Similar to many other tech conferences, the jQuery conference at Microsoft’s campus in Mountain View allows developers to choose one of the two available sessions at a time slot. For me, making choices on weekends is often not desired, especially when I do not want to miss out anything.

Here I am going to share the takeaways from half of the sessions I attended.

Ads, widgets, and analytics – Steve Souders

A similar talk on site performance was given earlier at JS Conf. See the recap here at Ajaxian.

Steve recommended using both YSlow and Google Page Speed Firefox plugins. Google Webmaster Tool gives performance recommendations; webpagetest.org and ShowSlow.com are also valuable tools to evaluate site performance.

Third party scripts are often very slow. Placing them near the top of the document can seriously impact the page performance. Here is a way to get around it:

1
2
3
var head = document.getElementsByTagName("head")[0] || document.documentElement, script = document.createElement("script");
...
head.insertBefore(script, head.firstChild);

High Performance jQuery – Robert Duffy

Key points:

  • Single-page application can degrade performance. Event binding can seriously affect the performance if the application keeps binding events to the same element, which is a common mistake of many applications.
  • Use the right tool. show() and hide() can often be replaced by .addClass(“show”) and .addClass(“hide”).
  • Use for-loop instead of each() can often improve performance.
  • Cache selectors in a local variable in order to avoid making unnecessary queries. E.g.
  • 1
    2
    3
    4
    var headers = $("headers");
    headers.doSomething();
    ...
    headers.doSomethingElse();

High Performance JavaScript – Nicholas Zakas

Slides of this presentation can be found here. Nicholas’ website also has plenty of posts and demos.

Takeaways:

  • The browser UI thread is responsiblefor both JS execution and UI update.
  • Long-running JavaScript = unresponsive UI
  • Limit JavaScript execution to 50ms – use Timers and web workers
  • JavaScript timers – time to add the execution command to the UI queue, not guaranteed to be the time of execution
  • A repaint occurs when a visual change doesn’t require recalculation of layout. This include changes to visibility, colors, background images, etc.A reflow occurs when a visual change requires a change in lauout. This include initial page load, browser resize, DOM structure change, layout style change, layout information retrieved, etc
  • A reflow occurs when a visual change requires a change in lauout. This include initial page load, browser resize, DOM structure change, layout style change, layout information retrieved, etc
  • Avoid browser “repaint”. $(“.div1”).css(“display”,”block”).css(“background”,”black”) is much worse than $(“.div1”).addClass(“.specialStyle”). Group UI changes into a CSS class instead of adding individual CSS rules. Also consider ele.style.styleText()
  • Manipulate a DOM element out of the tree before adding it to the document
  • Minimize access to layout information such as offsetTop, clientWidth… and store them in variables

How to manage large applications with jQuery – Alex Sexton

Slides of this presentation can be found here.

  • Alex briefly discussed about the 3 major inheritance models, i.e. Pseudo-Classical, Classical and Prototypal.
  • Store DOM elements in objects… code becomes much much easier!
  • He also mentioned about using RequireJS, which is faster than just including script tags, since it’s asynchronous by default.

Future-proof HTML 5 markup with jQuery – Mike Taylor

Do this:

1
2
3
<!--[if lte IE 9]-->
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
&lt; ![endif]--&gt;

HTML 5 forms are cool, e.g. autofocus, pattern, placeholder and datalist.

Session 6 – Web Workers with jQuery – Rick Waldron

Web Workers is an API that allows running non-blocking scripts parallel to the main page. It creates a thread-like environment that processes can live in parallel. Long-running scripts can be processed by different threads without blocking the UI queue.

Things to look: jQuery Hive and Pollen JS.

Here is one of the posts by Rick on Web Workers.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
2 Responses
  1. Ka Ho Au says:

    thanks it is very useful

  2. kominki says:

    I do agree with all of the ideas you have presented in your post. They are very convincing and will certainly work. Still, the posts are very short for newbies. Could you please extend them a little from next time? Thanks for the post!!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>