Ad aumentare il rischio che nella stessa pagina web appaia uno script duplicato concorrono principalmente due fattori: la dimensione del team di lavoro e il numero degli script gestiti nel proprio progetto web.
Sviluppare un sito web richiede una mole significativa di risorse, specialmente se il sito riceverà moltissime visite. Se pensiamo per un attimo al flusso di lavoro di una comune azienda web, oltre al team che sviluppa fattivamente il sito, terze parti prepareranno contributi da aggiungere al codice della pagina come ad esempio:
- pubblicità;
- loghi;
- notizie;
- risultati sportivi.
Quando sviluppatori differenti che magari fanno parte di gruppi di lavoro disomogenei aggiungono del codice alla pagina, è facile incappare nel rischio di inserire lo stesso script due o più volte.
Stando a delle statistiche il numero medio di script presenti nelle pagine web più visitate è maggiore di sei, e la probabilità con la quale si presenteranno script duplicati aumenta in funzione della quantità di script presenti nella pagina.Per farla breve, più script sono presenti nella pagina, più probabilità ci sono che uno di questi venga incluso due o più volte.
Il degrado delle prestazioni
Gli script duplicati danneggiano le prestazioni in due modi:
- aumento delle richieste HTTP superflue;
- esecuzione ridondante di codice Javascript.
L'aumento delle richieste HTTP superflue si verificherà solamente in Internet Explorer; infatti, se uno script esterno verrà incluso due volte nella pagina non venendo salvato in cache, il browser durante il caricamento genererà due richieste HTTP.
Questo non sarà un problema se verrà impostato nel proprio script un header Expires in un futuro lontano, siccome il browser utilizzerà una copia di quel componente presente in cache fino al lasso di tempo specificato tramite header Expires.
Le specifiche HTTP definiscono questi header come la data e l'ora dopo le quali una risposta è da considerarsi scaduta.
Per essere più precisi, anche se lo script risiederà nella cache del browser verranno lo stesso eseguite delle richieste HTTP extra per inviare al client il componente che risiederà nella cache, ovviamente la risposta sarà più piccola e più veloce.
Oltre a generare richieste HTTP superflue in Internet Explorer, verrà perso del tempo nel valutare il “workflow” dello script.Questa esecuzione ridondante del codice Javascript si verificherà in tutti i browser, a prescindere dal fatto che lo script sia conservato in cache o meno.
Vediamo un piccolo esempio di codice:
<body>
<div id='risultato'></div>
<!-- Inserisco due volte il mio script Javascript -->
<script type="text/javascript">
var contatore=0;
</script>
<script src="duplicate.js" type="text/javascript"></script>
<script src="duplicate.js" type="text/javascript"></script>
<script type="text/javascript">
document.getElementById('risultato').innerHTML=contatore;
</script>
</body>
Il codice dello script “duplicate.js”:
contatore ++
Dal codice sopra riportato si può notare come lo script duplicato incrementi una variabile globale contatore.
Dato che lo script è richiamato due volte nella pagina, sarà quindi valutato due volte portando il valore del contatore a 2.Il problema degli scaricamenti e delle valutazioni superflue si ripeterà per ciascuna istanza dello script presente nella pagina web.
Riassumendo:
- includere lo stesso script più volte nella pagina la renderà più lenta;
- in Internet Explorer, se lo script non potrà essere mantenuto in cache o se si ricaricherà la pagina, verrano eseguite ulteriori richieste HTTP;
- gli script duplicati verranno valutati più volte.
Evitare gli script duplicati
Vediamo insieme un modo per evitare di includere accidentalmente due volte lo stesso script in una pagina web.
Creiamo una funzione con PHP che si occuperà di controllare se uno script sia stato già inserito o meno in pagina: ecco un esempio .
Analizziamo insieme il codice:
<?php
$scriptArray;
function insertScript($file)
{
global $scriptArray;
if(!in_array($file,$scriptArray))
{
$scriptArray[]=$file;
echo "<script type='text/javascript' src='".$file."'></script>rn";
}
}
?>
<html>
<head>
<title>Test script duplicati</title>
</head>
<body>
<?php
/**
* Inserisco la lista degli script che userà questa pagina
* la funzione php si occuperà di controllare se sono duplicati o meno
*/
insertScript('duplicate.js');
insertScript('libreria.js');
insertScript('duplicate.js');
?>
</body>
</html>
- Viene istanziato un array globale
$scriptArray; globale per far in modo che la funzioneinsertScriptriesca ad accedervi; - la funzione
insertScriptsi aspetterà come parametro il percorso del file Javascript; - tramite la funzione di php
in_arrayverrà controllato se il percorso del file sia già stato precedentemente caricato nell'array; se il file verrà trovato si uscirà dalla funzione, altrimenti verrà appeso il percorso del file nell'array$scriptArraye si invierà al client il tagscriptrelativo al file.
Come potrete notare dal codice sorgente dell'esempio (che è disponibile per il download), la libreria 'duplicate.js' verrà inserita una sola volta.
