Chris Iona

JavaScript: The Singleton Design Pattern

I’m in the process of developing a “Learning Modern JavaScript” section.

The first in the series is the Singleton Pattern.

You can real the full article at:

http://chrisiona.com/learning-modern-javascript/the-singleton-pattern/

jQuery 1.4 released, benchmarked

Introduction

jQuery 1.4 has now been released through the  great work of John Resig and the jQuery Team. This build saw some great new features, and 207 bug fixes. The team spent a log of time refactoring the internals of jQuery itself, resulting in some significant performance gains (always a good thing).

Performance Tests

Interacting with the DOM can be the slowest part of your Web Application, so I’m targeting selectors and lots of DOM manipulations here. Each of these Performance Tests were run under the following conditions:-

1. The jQuery builds used in these tests were 1.2.6 (“1.2″), 1.3.0 (“1.3″) and 1.4.0 (“1.4″)
2. Tests were run on a 2.4GHz MacBook Pro with 4GB RAM on 10.5.6 using Safari 4.0.4
3. Each test was run 5 times, and averaged for the charts

First Test

Firstly, let’s compare a simple recursive call to append() a div to the document body.

$(document).ready( function(){
   for( var i = 0; i<1000; i++ ) {
      $("body").append("<div>" + i + "</div>");
   }
});

As you can see, there are some slight improvements between each of the major releases. Probably not enough to make a notable difference on their own.

Second Test

Secondly, let’s compare a recursive nested call to append() method. This iteration will find the last div in the DOM, and append another div to it 1000 times over! (uses the :last attribute).

$(document).ready( function(){
    for( var i = 0; i<1000; i++ ) {
       $("div:last").append("<div>" + i + "</div>");
    }
});

Interestingly enough, 1.3 takes longer to complete than the 1.2 build. The notable result is that 1.4 blows the previous builds out of the water.

Third Test

In this test, we have a HTML page with 3,000 nested div’s. The purpose of this test is to set the font colour of all divs to red, but then set the first to blue and the last to green.

$(document).ready( function(){
    $("div").css({color: "red"});
    $("div:first").css({color: "blue"});
    $("div:last").css({color: "green"});
});

As you can see, significant speed gains in 1.4 over the older versions.

Final Test

The final test iterates 3000 times, over code which creates a div, applies some properties, and prepends it to the document body.

for( var i = 0; i<3000; i++ ) {
    $('<div/>').attr("id", "testdiv")
    .css({
        fontSize: "14px",
        border: "1px solid red",
        backgroundColor: "orange"
    })
    .html("This is test content")
    .click( function(){
        alert('Test Div has been clicked!');
    })
    .prependTo("body");
}

1.4 is certainly the fastest of the three, clearly showing off.

However, there is a new capability in 1.4. It now allows you to pass attributes to the jQuery() object

for( var i = 0; i<3000; i++ ) {
    $('<div/>', {
            id: "testdiv",
            css: {
            fontSize: "14px",
            border: "1px solid red",
            backgroundColor: "orange"
        },
        html: "This is test content",
        click: function(){ alert('Test Div has been clicked!'); }
    }).prependTo("body");
}

The result of the new capability is represented as the orange bar. It’s marginally more expensive to complete, but certainly improves code maintainability.

Using Google’s (quick) Edge Cache Servers

<!-- Include jQuery 1.4 -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

1.4 Gotchyas

• When calling jQuery() with no arguments, it no longer converts it to jQuery(document).
• The add() method now merges and sorts the results
• Incoming JSON data must be correct. jQuery now throws an exception if it receives malformed JSON data.
• For the full list of changes in 1.4, visit the jQuery API site

Related Links

• http://jquery14.com/
• http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/
• http://docs.jquery.com/
• http://api.jquery.com/