Voglio ringraziare thinkcode per l’opportunità offertami e spero davvero di poter collaborare ancora con loro :)

jQuery sta rapidamente diventando la libreria JavaScript più usata al mondo, per lo sviluppo di applicazioni web interattive e dinamiche. In questo screencast di poco più di un’ora, Claudio Cicali ci guida nell’apprendimento dei concetti di base, mostrando il come e il perché dell’uso della libreria, a partire dalla sua storia, per finire a parlare delle best practice, passando per la manipolazione del DOM, la gestione degli eventi e Ajax. Si tratta di uno screencast indispensabile per lo sviluppatore moderno.

The question I would like to give an answer to was: giving the selector of an HTML ID, how much the document.getElementById is faster than the jQuery selection? Well – as it tourned out – it is astonishingly faster.

The test run over 100000 calls to the same minimal function and then collect the result in millisecond. For each test, 8 runs were made and the greatest and lowest value were dropped before the average time was computed. Every test was ran against Firefox 3.5.6, Firefox 3.6b5, Chrome 4, Safari 4, IE 8 and Opera 10.10.

“Why don’t run the test also against the soon to be released jQuery 1.4.0?”, I asked myself. So I did.

The test code itself goes along these lines:

function benchmark(f, result) {
  var start = new Date();
  f();
  var stop = new Date();
  document.getElementById(result).innerHTML = stop - start;
}

$("#start").click(function() {
    benchmark(function() {
      var e;
      for(n=0; n < 100000; n++) {
        e = $('#testID');
// or  e = document.getElementById('#testID');
      }
    }, "result");
    return false;
});

And here comes the whole picture:

What did I learn?

• when possible, use the document.getElementById() native function (or a simple helper wrapper) instead of the jQuery method
• IE and Firefox 3.5 are embarassingly slow
• Chrome and Safari are embarassingly fast
• Firefox 3.6 is gaining a lot of performance points, but still…
• Opera 10.10 is good, but the gEBI performances are very bad
• Chrome is loosing something with jQuery 1.4. Well, it seems so. I don’t think this is real.
• The best performance gain with jQuery 1.4 would be for IE8

Remember that this test is extremely unreliable and of indicative quality only. Do not take any assumption for granted :)

ADDENDUM: as a follow up to a discussion on Friendfeed, I ran one more test. This time I’ve used a wrapper like this one:

function $getId(id) {
  $(document.getElementById(id));
}

$("#startWRAPPER").click(function() {
    benchmark(function() {
      var e;
      for(n=0; n < 100000; n++) {
        e = $getId('testID');
      }
    }, "result");
    return false;
});

When you need an ID, as a jQuery object, using the wrapper can certainly give you same benefits. The test has been ran with the latest jQuery 1.4 version.

Il sistema parte dal presupposto che una form da modificare sia composta da:

• un campo di testo
• una lista di opzioni entro le quali cercare (devono essere radio button)
• un tasto di invio.

L’utente, normalmente, scrive il testo da cercare, seleziona tramite radio button dove vuole effettuare la ricerca (lo scope della stessa) e preme il pulsante. Questo plugin trasforma i radio button in una lista che apparirà direttamente sotto il campo di ricerca non appena il campo di input prenderà il focus. Una volta scritto il testo da cercare, l’utente potrà cliccare direttamente lo scope dentro la lista per effettuare la ricerca. Il plugin crea la lista in modo da essere anche navigabile da tastiera, tramite tab, in quanto tutti gli item sono costituiti da elementi A; così, per una massima velocità di utilizzo, si scrive il testo da cercare, si preme tab e poi invio.

Un paio di immagini dovrebbero chiarire meglio il concetto.

Questa è la form di “partenza”, senza il plugin attivo:

Una volta attivato il plugin, la form viene “collassata” in questa:

Una volta che il cursore di sia portato nel campo di ricerca, ecco cosa succederà:

I radio button sono stati trasformati in una pseudo select box a discesa, navigabile tramite tab o mouse (non sono attivi i tasti cursore, perché l’impegno necessario è forse troppo rispetto all’effettiva utilità del plugin).

La form di esempio è questa; si può osservare come si usa il plugin:

<html>
<head>
<title></title>
<link rel="stylesheet" href="lisearch.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="lisearch.js"></script>
<script type="text/javascript">
$(function() {
  $('.scopes').lisearch();
});
</script>
</head>
<body>
<form>
  <ul>
    <li>
      <label>Frase da cercare</label>
      <input type="text" id="q" name="q">
    </li>
    <li id="scopes" class="scopes">
      <input type="radio" name="scope" value="italia"><label>In italia</label>
      <input type="radio" name="scope" value="europa"><label>In europa</label>
      <input type="radio" name="scope" value="mondo"><label>Nel mondo</label>
    </li>
    <li><input type="submit" value="Cerca"></li>
  </ul>
</form>
</body>
</html>

Insieme al plugin viene fornito un file CSS minimale che può servire per capire meglio gli elementi che vengono creati e dunque per poterli stilare. Ovviamente niente può sostituire Firebug, in questo contesto.

I test di funzionamento sono stati effettuati con jQuery 1.3.2 (l’ultimissima versione al momento in cui scrivo), ma credo che possa funzionare anche con versioni più vecchie.

Scarica il plugin oppure prova una demo