Corsi on-line

Velocizzare JavaScript. Quando jQuery non è la soluzione migliore

Il framework JavaScript jQuery ha trovato ampia diffusione nei progetti degli sviluppatori grazie al fatto di mettere a disposizione librerie e metodi già pronti per la realizzazione di Web applications; in molti casi jQuery permette di risparmiare tempo diminuendo la necessità di digitare codice nativo, ma questo vantaggio giustifica sempre l’impiego di tale soluzione anche per le procedure meno articolate? In questo caso la risposta più corretta è certamente negativa.

VanillaJSInnanzitutto, è necessario sottolineare che per il solo fatto di essere immediatamente disponibile, libero, gratuito e accessibile anche tramite CDN (Content Delivery Network), non è detto che jQuery debba essere obbligatoriamente utilizzato; in secondo luogo, andrebbe ricordato che questo framework non è l’unico dotato delle stesse caratteristiche per quanto riguarda la licenza d’uso e le modalità di distribuzione. A questo proposito è possibile citare uno strumento forse meno conosciuto come Vanilla JS, nato dal desiderio di alcuni sviluppatori di lanciare una provocazione.

Anche quest’ultimo è classificabile come una “libreria monolitica”, cioè non finalizzata a svolgere un’unica funzionalità, ma a differenza di jQuery si dimostra estremamente più leggero. In fase di produzione Vanilla pesa infatti appena zero byte! Questo per via del fatto che esso non è altro che JavaScript puro e come tale verrà riconosciuto da qualsiasi browser sufficientemente aggiornato. Giusto per avere un’idea di quanto l’utilizzo di JavaScript senza il ricorso a framework intermedi possa rivelarsi ottimale dal punto di vista delle performances, basti pensare che il rilevamento di un elemento del DOM (Document Object Model) tramite il suo tag name con un’istruzione come la seguente:

document.getElementsByTagName("span");

Consente l’esecuzione di oltre 8 milioni di operazioni al secondo contro le poco più di 19 mila di jQuery attraverso:

$jq('span');

Nello stesso modo il fade out con conseguente rimozione di un elemento tramite JavaScript richiederebbe un’espressione come la seguente:

var s = document.getElementById('thing').style; s.opacity = 1; (function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

ciò contro uno snippet per jQuery come quello presentato di seguito:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script> 
$('#thing').fadeOut(); 
</script>

che oltre a richiedere l’inclusione di una libreria esterna e un maggior numero di risorse non presenta particolari vantaggi dal punto di vista del risparmio di tempo nella digitazione del codice.

Via Vanilla JS

Post correlati
I più letti del mese
Tematiche