JavaScript  »  Articoli  »  Programmazione Javascript 

I fattori che concorrono al successo di un sito web sono molteplici e spaziano dall'efficacia della comunicazione alla qualità dei contenuti. Sotto il punto di vista tecnico uno degli aspetti principali da tenere in considerazione è la velocità di caricamento delle pagine. Una scarsa performance in questo campo può essere legata a molteplici cause: connessioni poco affidabili, server sovraccarichi, immagini non ottimizzate o troppo numerose.

Da quando JavaScript è diventato onnipresente nei siti web, l'attenzione degli sviluppatori si è rivolta alla gestione e ottimizzazione degli script, anche considerando che spesso sono uno dei principali fattori di stress per il browser.

Il problema

Il problema principale nel caricamento di script JavaScript risiede nel modo in cui i browser stessi li caricano. Nei browser più recenti, le risorse richiamate attraverso un tag script sono scaricate in parallelo come tutte le altre (CSS, immagini, etc). Tuttavia esse vengono interpretate ed eseguite singolarmente in ordine di caricamento mentre l'interpretazione ed il rendering di altre risorse viene bloccato. Questo scenario si rivela ancora peggiore in browser come Internet Explorer 6 e 7, dove gli script vengono addirittura scaricati singolarmente bloccando il download di tutte le altre risorse.

Nelle intenzioni degli sviluppatori, questo comportamento serve a garantire che eventuali dipendenze fra gli script vengano rispettate e che funzioni da lanciare al caricamento del DOM siano già disponibili. In pratica, nel caricamento di due script da 50KB e 3KB il browser attenderà che il primo sia scaricato ed interpretato lasciando in attesa il secondo.

Ottimizzazioni di base

Dato questo problema, le soluzioni più comunemente diffuse intervengono in tre direzioni:

• riducendo il peso dei file attraverso la minificazione e compressione del codice. YUI Compressor, Closure Compiler, e Packer sono fra i tool più affidabili ed efficaci in questa operazione.
• diminuendo il numero di file da scaricare per mezzo della concatenazione degli script.
• posizionando i tag script prima della chiusura del body invece che nell'head, in modo che il motore di rendering li incontri solamente dopo aver scaricato risorse fondamentali al rendering della pagina come HTML e CSS, ma sempre prima del caricamento completo del DOM.

Nonostante esistano versioni online degli strumenti descritti in precedenza, è anche disponibile un plugin per Eclipse chiamato Web Optimizer di Rockstarapps che integra con facilità compressione ed ottimizzazione direttamente nel vostro progetto.

Svantaggi

Sebbene concatenazione e minificazione siano considerate pratiche positive in fase di pubblicazione di un progetto, è importante sottolinearne alcuni effetti collaterali.

Anzitutto la concatenazione comporta la generazione di file di grosse dimensioni i quali, essendo scaricati da un unico processo, possono aumentare i tempi di download diminuendo paradossalmente le performance. Inoltre la concatenazione e la minificazione risultano efficaci se applicate a script di grandi dimensioni e comuni all'intero progetto (per esempio le librerie), mentre sarebbe buona regola non includere script usati solo in poche, determinate pagine (come Lightbox o validatori client-side) per evitare che vengano caricati inutilmente.

Altri articoli

Altre guide

Altre newsletter