{"id":89,"date":"2010-08-02T22:39:23","date_gmt":"2010-08-02T20:39:23","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/riduzione-ai-minimi-termini-di-javascript-part-ii\/"},"modified":"2010-08-02T22:39:23","modified_gmt":"2010-08-02T20:39:23","slug":"riduzione-ai-minimi-termini-di-javascript-part-ii","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/riduzione-ai-minimi-termini-di-javascript-part-ii\/","title":{"rendered":"Riduzione ai minimi termini di JavaScript, Parte II"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/08\/n11a1.jpg\" border=\"0\" width=\"134\" height=\"274\" align=\"left\" \/>Nel mio <a href=\"http:\/\/www.alistapart.com\/articles\/better-javascript-minification\/\">ultimo articolo<\/a>, ho introdotto i concetti base per una migliore minimizzazione di JavaScript con lo YUI Compressor. Come molti lettori hanno astutamente sottolineato, si riduce tutto all&#8217;\u201cevitare di usare <code>eval()<\/code> e l&#8217;istruzione with.\u201d La premessa dell&#8217;articolo consisteva nell&#8217;assicurarsi che capiste come non tirarvi la zappa sui piedi usando lo YUI Compressor. Precedentemente, abbiamo imparato cosa <em>non<\/em> fare. Questo articolo enfatizza invece cosa <em>dovreste<\/em> fare per sfruttare al massimo la migliore feature di riduzione dello YUI Compressor: la sostituzione dei nomi delle variabili locali.<\/p>\n<div class=\"paragrafo\">\n<h2>Sostituzione del nome della variabile<\/h2>\n<p>Sostituire i nomi delle variabili locali con delle alternative pi\u00f9 brevi (di uno o due caratteri) costituisce il maggior risparmio di byte che lo YUI Compressor offra. Spesso, assegnare dei nomi alle variabili \u00e8 fonte di angoscia nella stesura del codice, ma fondamentalmente, i nomi delle variabili hanno un senso solo per le persone che devono cercare di capire il codice. Una volta che siete sicuri che non ci sono esseri umani che devono interpretare il vostro codice, le variabili diventano semplicemente dei segnaposto generici per i valori.<\/p>\n<p>Quando usate JavaScript in produzione, il vostro unico utente \u00e8 il browser e al browser non interessa affatto che nomi usiate per le variabili. Per questa ragione, lo YUI Compressor sostituisce questi nomi di variabile con delle versioni pi\u00f9 corte. Dal momento che la maggior parte del debugging avviene su macchine dedicate allo sviluppo con il codice non ancora ridotto in dimensione, questa pratica non influisce sul lavoro di ingegneria. Tuttavia, se vi capita di rimanere bloccati avendo necessit\u00e0 di fare debugging su qualcosa che \u00e8 gi\u00e0 in produzione, sappiate che esistono dei modi per rendere pi\u00f9 semplice <a href=\"http:\/\/www.yuiblog.com\/blog\/2008\/06\/27\/fiddler\/\">il debug di codice gi\u00e0 ridotto<\/a>.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Che cosa non pu\u00f2 essere sostituito?<\/h2>\n<p>Prima di parlare delle tecniche per la sostituzione ottimale delle variabili, \u00e8 importante comprendere quali parti di codice non possono essere rimpiazzate. Spesso si pensa che quanto segue sia sostituibile:<\/p>\n<ul>\n<li>nomi di propriet\u00e0 (<code>object.property<\/code>),<\/li>\n<li>parole chiave (<code>if<\/code>, <code>var<\/code>, <code>return<\/code>, etc.) e<\/li>\n<li>variabili globali<\/li>\n<\/ul>\n<p>Molti sviluppatori non si soffermano a pensare a quante volte si accede ad una propriet\u00e0 o a quante parole chiave di JavaScript usino quando scrivono il loro codice. Considerando i nomi di propriet\u00e0, le parole chiave e le variabili globali all&#8217;interno della struttura del vostro codice, si potrebbe giungere ad un rapporto di riduzione molto maggiore.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Nomi di propriet\u00e0<\/h2>\n<p>Mentre pu\u00f2 fare la sostituzione di variabile sulle variabili locali, non c&#8217;\u00e8 nulla che lo YUI Compressor possa fare per le propriet\u00e0. Dal momento che i nomi delle propriet\u00e0 sono definiti sull&#8217;oggetto stesso, non c&#8217;\u00e8 un modo per rilevarle o per sostituirle in maniera sicura. Ci\u00f2 significa che il codice che accede a molte propriet\u00e0 sar\u00e0 pi\u00f9 grande del codice che non vi accede. Ad esempio:<\/p>\n<p>(Gli a-capo sono contrassegnati da \u00bb <em>\u2014Ed.<\/em>)<\/p>\n<pre><code><br \/>function toggleImage(id){<br \/>  if (document.getElementById(id).src.indexOf(\"1.png\") &gt; -1){<br \/>      document.getElementById(id).src = document.getElementById \u00bb <br \/>(id).src.replace(\"1.png\", \"2.png\");<br \/>  }<br \/>}<br \/><\/code><\/pre>\n<p>Questa funzione sostituisce l&#8217;immagine visualizzata con un&#8217;altra manipolando la propriet\u00e0 <code>src<\/code>. Sfortunatamente, la funzione ridotta risultante \u00e8 pi\u00f9 o meno della stessa dimensione (168 byte vs. 205 byte):<\/p>\n<pre><code><br \/>function toggleImage(a){ if(document.getElementById(a).src.indexOf \u00bb <br \/>(\"1.png\")&gt;-1) {document.getElementById(a).src=document.getElementBy \u00bb <br \/>Id(a).src.replace(\"1.png\",\"2.png\")}};<br \/><\/code><\/pre>\n<p>Notate come <code>document.getElementById(a).src<\/code> sia ripetuto tre volte, il che \u00e8 quasi esattamente la stessa cosa dell&#8217;originale (con l&#8217;eccezione del nome della variabile).<\/p>\n<p>Quando la stessa propriet\u00e0 dell&#8217;oggetto \u00e8 usata frequentemente, la migliore strategia \u00e8 quella di memorizzare il valore della propriet\u00e0 in una variabile locale e poi usare questa variabile locale. Il codice precedente pu\u00f2 essere riscritto cos\u00ec:<\/p>\n<pre><code><br \/>function toggleImage(id){<br \/>  var image = document.getElementById(id);<br \/>  if (image.src.indexOf(\"1.png\") &gt; -1){<br \/>      image.src = image.src.replace(\"1.png\", \"2.png\");<br \/>  }<br \/>}<br \/><\/code><\/pre>\n<p>Non solo questa versione del codice \u00e8 pi\u00f9 piccola della precedente (185 byte), ma la versione ridotta \u00e8 ancora pi\u00f9 piccola:<\/p>\n<pre><code><br \/>function toggleImage(b){var a=document.getElementById(b);if(a.src. \u00bb <br \/>indexOf(\"1.png\")&gt;-1){a.src=a.src.replace(\"1.png\",\"2.png\")}};<br \/><\/code><\/pre>\n<p>Questo codice \u00e8 di soli 126 byte\u2014molto pi\u00f9 piccolo del codice originale e ancora pi\u00f9 piccolo del codice originale a cui \u00e8 stata applicata la riduzione. Si ha questo risparmio senza alcun cambiamento nella funzionalit\u00e0, semplicemente usando un po&#8217; di rifattorizzazione. Vale la pena notare che questo cambiamento migliora anche la performance a runtime, poich\u00e9 non si deve richiamare tre volte <code>document.getElementById()<\/code>.<\/p>\n<p>Tenete sempre presente che qualunque cosa appare dopo un punto in JavaScript (<code>object.property<\/code>) non pu\u00f2 essere ulteriormente ridotto. Quando riducete il numero di punti nel vostro codice, riducete anche la dimensione complessiva una volta che il codice sar\u00e0 sottoposto a minimizzazione.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Parole chiave<\/h2>\n<p>Quando esaminate un qualunque file JavaScript di grosse dimensioni, potete notare quante parole chiave vengano usate. Parole chiave come <code>var<\/code>, <code>if<\/code>, <code>for<\/code> e <code>return<\/code> sono tutte regolarmente usate per ottenere la funzionalit\u00e0 desiderata. Il problema \u00e8 che si pu\u00f2 fare un uso eccessivo di queste parole chiave e, in tal modo, si inficia la riduzione della dimensione del file. Le due parole chiave pi\u00f9 usate sono <code>var<\/code> e <code>return<\/code>.<\/p>\n<p>L&#8217;istruzione <code>var<\/code> definisce una o pi\u00f9 variabili. Vi capiter\u00e0 a volte di vedere del codice come questo:<\/p>\n<pre><code><br \/>var image = document.getElementById(\"myImage\");<br \/>var div = document.getElementById(\"myDiv\");<br \/><\/code><\/pre>\n<p>Questo codice definisce due variabili, una dopo l&#8217;altra. Spesso vedo questo pattern per 10 o pi\u00f9 variabili in fila. Fare cos\u00ec gonfia artificialmente la dimensione del vostro codice per pi\u00f9 istruzioni <code>var<\/code> possono essere combinate in un&#8217;unica separate dall&#8217;operatore virgola:<\/p>\n<pre><code><br \/>var image = document.getElementById(\"myImage\"),<br \/>    div = document.getElementById(\"myDiv\");<br \/><\/code><\/pre>\n<p>Questo codice definisce anch&#8217;esso le due variabili e ne fornisce la stessa inizializzazione. In questo modo, avete risparmiato i tre byte che avrebbe occupato un&#8217;altra <code>var<\/code>. Tre byte potrebbero non sembrare un granch\u00e9, ma se siete in grado di trovare una dozzina di posti in cui \u00e8 presente al momento un&#8217;istruzione <code>var<\/code> extra, allora comincerete a risparmiare sul serio. Il miglior consiglio \u00e8 di usare una istruzione <code>var<\/code> all&#8217;inizio di ciascuna funzione per definire tutte le variabili che userete in quella funzione. Lo YUI Compressor rilever\u00e0 le funzioni con pi\u00f9 di un&#8217;istruzione <code>var<\/code>quando la flag <code>\u2013v<\/code> \u00e8 in uso (anche JSLint pu\u00f2 fare questo).<\/p>\n<p>La seconda istruzione, <code>return<\/code>, \u00e8 tipicamente usata eccessivamente in questo modo:<\/p>\n<pre><code><br \/>function getValueFor(data){<br \/><br \/>  if (firstCondition(data)){<br \/>    return 1;<br \/>  } else if (secondCondition(data)){<br \/>    return 2;<br \/>  } else if (thirdCondition(data)){<br \/>    return 3;<br \/>  } else {<br \/>    return 4;<br \/>  }    <br \/>}<br \/><\/code><\/pre>\n<p>Fondamentalmente, questa funzione si conclude ritornando un valore basato sulla valutazione di alcune condizioni. La versione minimizzata \u00e8 di 146 byte. Potete risparmiare dei byte usando una singola istruzione return:<\/p>\n<pre><code><br \/>function getValueFor(data){<br \/>\t\t\t<br \/>  var value;<br \/>  \t\t\t<br \/>  if (firstCondition(data)){<br \/>    value = 1;<br \/>  } else if (secondCondition(data)){<br \/>    value = 2;<br \/>  } else if (thirdCondition(data)){<br \/>    value = 3;<br \/>  } else {<br \/>    value = 4;<br \/>  }<br \/>\t\t  \t<br \/>  return value;<br \/>}<br \/><\/code><\/pre>\n<p>Il codice riscritto rimpiazza la maggior parte delle istanze di <code>return<\/code> con una variabile locale che pu\u00f2 essere ridotta. La versione minimizzata di questo codice \u00e8 140 byte. Il codice in realt\u00e0 pu\u00f2 essere ulteriormente rifattorizzato:<\/p>\n<pre><code><br \/>function getValueFor(data){<br \/><br \/>  var value = 4;<br \/><br \/>  if (firstCondition(data)){<br \/>     value = 1;<br \/>  } else if (secondCondition(data)){<br \/>     value = 2;<br \/>  } else if (thirdCondition(data)){<br \/>     value = 3;<br \/>  }<br \/><br \/>  return value;<br \/>}<br \/><\/code><\/pre>\n<p>Questo codice si riduce a 133 byte e produce lo stesso risultato. Notate che questa versione rimuove inoltre una parola chiave in pi\u00f9, <code>else<\/code>, rendendolo ancore pi\u00f9 piccolo.<\/p>\n<p>Senza avere la pretesa di riaprire l&#8217;annoso dibattito riguardo la bont\u00e0 e\/o necessit\u00e0 di un singolo exit point, usare una sola istruzione <code>return<\/code> per ciascuna funzione fa diminuire la dimensione delle vostre funzioni una volta minimizzate.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Variabili globali<\/h2>\n<p>Come citato precedentemente, la sostituzione del nome della variabile pu\u00f2 avvenire solo sulle variabili locali. Cercare di sostituire i nomi delle variabili globali, inclusi i nomi di funzioni globali, pu\u00f2 risultare in codice non funzionante perch\u00e9 lo YUI Compressor non ha modo di sapere in quale altro luogo queste variabili e funzioni potrebbero essere usate. Questo si applica sia alle variabili globali predefinite come <code>window<\/code> e <code>document<\/code>, sia alle variabili globali che create voi stessi.<\/p>\n<h3>Salvate le variabili globali localmente<\/h3>\n<p>Se necessitate di una variabile globale pi\u00f9 di una volta in una funzione, \u00e8 meglio salvare quella variabile globale in una variabile locale. Questo ha due importanti vantaggi: \u00e8 pi\u00f9 rapido accedere a variabili locali a runtime e, una volta immagazzinate in una variabile locale, lo YUI Compressor pu\u00f2 sostituire il nome della variabile. Ad esempio:<\/p>\n<pre><code><br \/>function createMessageElement(message){<br \/>  var div = document.createElement(\"div\");<br \/>  div.innerHTML = message;<br \/>  document.body.appendChild(div);<br \/>}<br \/><\/code><\/pre>\n<p>Questa funzione ha due variabili locali, <code>message<\/code> e <code>div<\/code>, cos\u00ec come una variabile globale, <code>document<\/code>. Osservate cosa succede quando il codice viene ridotto:<\/p>\n<pre><code><br \/>function createMessageElement(a){var b=document.createElement(\"div\"); \u00bb <br \/>b.innerHTML=a;document.body.appendChild(b)};<br \/><\/code><\/pre>\n<p>Potete chiaramente notare che <code>document<\/code> appare due volte nel codice minimizzato. Avete risparmiato 43 byte (158 l&#8217;originale, 115 quello ridotto), il che non \u00e8 male, ma si pu\u00f2 fare di meglio. Salvando <code>document<\/code> in una variabile locale, potete risparmiare ancora di pi\u00f9. Ecco il codice riscritto:<\/p>\n<pre><code><br \/>function createMessageElement(message){<br \/>  var doc = document,<br \/>  div = doc.createElement(\"div\");<br \/>  div.innerHTML = message;<br \/>  doc.body.appendChild(div);<br \/>}<br \/><\/code><\/pre>\n<p>La versione ridotta di questo codice risulta cos\u00ec:<\/p>\n<pre><code><br \/>function createMessageElement(a){var b=document,c=b.createElement \u00bb <br \/>(\"div\");c.innerHTML=a;b.body.appendChild(c)};<br \/><\/code><\/pre>\n<p>Ancora una volta, sebbene il codice originale sia leggermente pi\u00f9 grande (175 byte), la versione ridotta \u00e8 decisamente pi\u00f9 piccola (110 byte). Il risparmio in questo caso \u00e8 di ulteriori cinque byte che potrebbero non sembrare molti, ma questa funzione utilizza <code>document<\/code> soltanto due volte; se venisse usata con maggior frequenza, il risparmio sarebbe molto pi\u00f9 grande.<\/p>\n<h3>Evitate di creare variabili globali<\/h3>\n<p>Lo YUI Compressor non pu\u00f2 sostituire le variabili globali, incluse quelle che definite voi stessi. Per questa ragione, \u00e8 meglio ridurre al minimo il numero di variabili e funzioni globali che introducete (questa \u00e8 inoltre considerata una buona pratica per la <a href=\"http:\/\/www.slideshare.net\/nzakas\/maintainable-javascript-1071179\">mantenibilit\u00e0<\/a> del codice). Considerate il seguente esempio:<\/p>\n<pre><code><br \/>var helloMessage = \"Hello world!\";<br \/>function displayMessage(){<br \/>  alert(helloMessage);<br \/>}<br \/>displayMessage();<br \/><\/code><\/pre>\n<p>In questo codice, sia <code>helloMessage<\/code> sia <code>displayMessage()<\/code> sono globali e quindi non si pu\u00f2 sostituirne i nomi. Il codice minimizzato risultante \u00e8 come segue:<\/p>\n<pre><code><br \/>var helloMessage=\"Hello world!\";function displayMessage(){alert \u00bb <br \/>(helloMessage)}displayMessage();<br \/><\/code><\/pre>\n<p>Laddove il codice originale era di 113 byte, il codice compresso \u00e8 ora di 95 byte: non un risparmio enorme.<\/p>\n<p>Nella maggior parte dei casi, non avete effettivamente bisogno delle variabili globali per portare a termine i task. Questo codice, ad esempio, funziona altrettanto bene quando entrambe <code>helloMessage<\/code> e <code>displayMessage()<\/code> sono variabili locali. Potete creare tutte le variabili e funzioni in un dato blocco di codice creando attorno ad esso una funzione anonima self-executing.<\/p>\n<p>Una funzione self-executing ha un aspetto un po&#8217; strano:<\/p>\n<pre><code><br \/>(function(){<br \/>  \/\/code here<br \/>})();<br \/><\/code><\/pre>\n<p>Questo codice crea una funzione e va in esecuzione immediatamente. E&#8217; simile a questa:<\/p>\n<pre><code><br \/>function doSomething(){<br \/>  \/\/code here<br \/>}<br \/>doSomething();<br \/><\/code><\/pre>\n<p>Dal momento che la funzione verr\u00e0 chiamata solo una volta, potete risparmiare dei byte eliminandone il nome. Una funzione self-executing \u00e8 il modo pi\u00f9 veloce per creare una funzione ed eseguirla esattamente una volta. E&#8217; inoltre molto semplice includere del codice gi\u00e0 esistente all&#8217;interno della funzione self-executing. Ecco come fare:<\/p>\n<pre><code><br \/>(function(){<br \/><br \/>  var helloMessage = \"Hello world!\";<br \/>  function displayMessage(){<br \/>      alert(helloMessage);<br \/>  }<br \/>  displayMessage();<br \/><br \/>})();<br \/><\/code><\/pre>\n<p>All&#8217;interno della funzione self-executing, <code>helloMessage<\/code> e <code>displayMessage()<\/code> sono locali. La versione ridotta di questo codice \u00e8 come segue:<\/p>\n<pre><code><br \/>(function(){var b=\"Hello world!\";function a(){alert(b)}a()})();<br \/><\/code><\/pre>\n<p>Notate che, sebbene il codice originale sia pi\u00f9 grande, pesando 154 byte, la versione ridotta \u00e8 di soli 63 byte (32 byte pi\u00f9 piccola del codice originale minimizzato).<\/p>\n<h3>Unire le tecniche<\/h3>\n<p>Potete migliorare ulteriormente l&#8217;efficacia di una funzione self-executing passando le variabili globali come argomenti. Una volta all&#8217;interno della funzione, gli argomenti sono variabili locali, cos\u00ec avete automaticamente creato l&#8217;opportunit\u00e0 per una migliore minimizzazione. Supponete di avere il seguente codice:<\/p>\n<pre><code><br \/>var helloMessage = \"Hello world!\";<br \/><br \/>function createMessageElement(message){<br \/>  var div = document.createElement(\"div\");<br \/>  div.innerHTML = message;<br \/>  document.body.appendChild(div);<br \/>}<br \/><br \/>createMessageElement(helloMessage);<br \/><\/code><\/pre>\n<p>Questo codice crea una funzione globale, <code>createMessageElement()<\/code>, e questa funzione usa l&#8217;oggetto globale document. C&#8217;\u00e8 anche la variabile globale <code>helloMessage<\/code>. Quando viene ridotta da sola, ottenete un totale di 179 byte. Includendola in una funzione self-executing, fate diventare <code>createMessageElement()<\/code> e <code>helloMessage<\/code> locali:<\/p>\n<pre><code><br \/>(function(){<br \/>  var helloMessage = \"Hello world!\";<br \/><br \/>  function createMessageElement(message){<br \/>      var div = document.createElement(\"div\");<br \/>      div.innerHTML = message;<br \/>      document.body.appendChild(div);<br \/>  }<br \/><br \/>  createMessageElement(helloMessage);<br \/>})()<br \/><\/code><\/pre>\n<p>L&#8217;unica variabile globale rimanente in questo codice \u00e8 <code>document<\/code> e quindi la minimizzazione non \u00e8 ottimale come potrebbe essere:<\/p>\n<pre><code><br \/>(function(){var a=\"Hello world!\";function b(c){var d=document. \u00bb <br \/>createElement(\"div\");d.innerHTML=c;document.body.appendChild(d)}b(a)})();<br \/><\/code><\/pre>\n<p>Il rapporto di compressione \u00e8 piuttosto buono per questo esempio (283 byte a 135 byte, o 52%), ma potete fare ancora un po&#8217; meglio rendendo <code>document<\/code> una variabile locale. Potete fare ci\u00f2 facilmente passando document alla funzione self-executing come argomento:<\/p>\n<pre><code><br \/>(function(doc){<br \/>    var helloMessage = \"Hello world!\";<br \/><br \/>    function createMessageElement(message){<br \/>        var div = doc.createElement(\"div\");<br \/>        div.innerHTML = message;<br \/>        doc.body.appendChild(div);<br \/>    }<br \/><br \/>    createMessageElement(helloMessage);<br \/>})(document)<br \/><\/code><\/pre>\n<p>In questo codice, la variabile <code>doc<\/code> \u00e8 locale alla funzione self-executing e cos\u00ec pu\u00f2 essere sostituito dallo YUI Compressor. Il risultato \u00e8:<\/p>\n<pre><code><br \/>(function(c){var a=\"Hello world!\";function b(d){var e=c.createElement \u00bb <br \/>(\"div\");e.innerHTML=d;c.body.appendChild(e)}b(a)})(document);<br \/><\/code><\/pre>\n<p>Questo codice \u00e8 di 130 byte, pi\u00f9 piccolo sia dell&#8217;originale che dell&#8217;esempio precedente. Ancora una volta, avete maggior risparmio con questa tecnica quando le variabili globali vengono usate pi\u00f9 di due volte.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Il caveat gzip<\/h2>\n<p>Il passo successivo alla minimizzazione di JavaScript \u00e8 la sua compressione e gzip \u00e8 la forma pi\u00f9 popolare di compressione. Il meccanismo di funzionamento di Gzip consiste nell&#8217;ottimizzazione delle ridondanze nel testo e le tecniche descritte in questo articolo rimuovono efficacemente alcune delle ridondanze che potrebbero normalmente essere compresse usando gzip.<\/p>\n<p>Quando si esegue la rifattorizzazione del codice usando queste tecniche, dovremmo aspettarci di vedere il rapporto di compressione di gzip diminuire\u2014il che vuol dire che la differenza in percentuale tra la dimensione del file ridotto e del file ridotto e zippato sar\u00e0 minore di prima. In ultima istanza, quello a cui dovreste puntare \u00e8 la versione zippata pi\u00f9 piccola possibile e poi alla versione minimizzata pi\u00f9 piccola possibile. La versione zippata \u00e8 importante per il network transfer time mentre la versione minimizzata \u00e8 importante per il parse time e per il caching.<\/p>\n<p>Durante la stesura di questo articolo, mi sono imbattuto nella libreria open source XAuth di Meebo. Il JavaScript sembrava che potesse diventare pi\u00f9 piccolo solo applicando alcune di queste tecniche. Ho passato un po&#8217; di tempo rifattorizzando il codice e ho ottenuto dei risultati decenti (trovate il mio codice su <a href=\"http:\/\/github.com\/nzakas\/xauth\/blob\/master\/src\/xauth.js\">GitHub<\/a>).<\/p>\n<table border=\"0\">\n<tbody>\n<tr>\n<th> <\/th>\n<th>Puro<\/th>\n<th>Minimizzato<\/th>\n<th>Minimizzato + Zippato<\/th>\n<th>% Gzip Diff<\/th>\n<\/tr>\n<tr>\n<td>Originale<\/td>\n<td>5720 b<\/td>\n<td>1307 b<\/td>\n<td>668 b<\/td>\n<td>49% pi\u00f9 piccolo<\/td>\n<\/tr>\n<tr>\n<td>Refattorizzato<\/td>\n<td>6143 b<\/td>\n<td>1210 b<\/td>\n<td>663 b<\/td>\n<td>45% pi\u00f9 piccolo<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Sebbene la dimensione del puro codice sorgente sia aumentata di poche centinaia di byte, la versione ridotta \u00e8 diminuita di quasi 100 byte, mentre la versione minimizzata e zippata si \u00e8 ridotta di cinque byte. Notate che gzip \u00e8 stato circa il 4% meno efficiente del codice rifattorizzato sebbene nel complesso la dimensione del codice fosse minore.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Conclusioni<\/h2>\n<p>Le tecnica pi\u00f9 potente per risparmiare byte con YUI Compresso \u00e8 rimpiazzare le variabili con dei nomi di variabile di una o due lettere. Assicurarsi che il proprio codice sia impostato in maniera tale che questa sostituzione possa avvenire con la maggior frequenza possibile \u00e8 importante per ottenere il codice pi\u00f9 ridotto. Quando programmate, tenete a mente che i nomi delle propriet\u00e0, le parole chiave e le variabili globali rimangono cos\u00ec come sono nel codice minimizzato. Le tecniche presentate in questo articolo sono pensate per ridurre l&#8217;impatto di tali questioni nel codice minimizzato finale. Dovreste usare l&#8217;accortezza di testare il vostro codice rifattorizzato con gzip per assicurarvi di avere il codice pi\u00f9 ridotto possibile, poich\u00e9 rimuovere le ridondanze riduce l&#8217;efficienza di gzip.<\/p>\n<p>Illustrazioni dell&#8217;articolo: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>I nomi da assegnare alle variabili possono essere una fonte di angoscia legata alla programmazione per le persone che devo cercare di comprendere il codice. Una volta che siete sicuri che nessun essere umano abbia bisogno di interpretare il vostro codice JavaScript, le variabili diventano semplici segnaposto per i valori. Nicholas C. Zakas ci mostra come ridurre ulteriormente JavaScript sostituendo i nomi delle variabili locali con lo YUI Compressor.<\/p>\n","protected":false},"author":818,"featured_media":7000586,"comment_status":"open","ping_status":"open","template":"","categories":[271,24,278],"tags":[],"coauthors":[293],"class_list":["post-89","article","type-article","status-publish","has-post-thumbnail","hentry","category-javascript","category-numero-11-3-agostoo-2010","category-workflow-tools"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=89"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000586"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=89"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=89"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=89"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}