MICHELEPISANI.IT
 

Selezione di suggerimenti in relazione ai casi più frequenti di utilizzo

10 Suggerimenti, Trucchi e Best Practice in Javascript per Ottimizzare le tue App

10 Suggerimenti, Trucchi e Best Practice in Javascript per Ottimizzare le tue App
Aprile 30
07:582016

Scrivere codice solitamente è fattibile in due modi: ottimizzato e non ottimizzato. Non sempre è facile, spesso per questione di tempo stanziato per il completamento di un lavoro, ma anche di progettazione nel caso in cui non siano fornite specifiche chiare o non sia ben definito come la logica dell'app dovrà svilupparsi, riuscire a scrivere del codice snello e che garantisca buone prestazioni alla web app o all'app per dispositivi mobili da realizzare.
Quello che sicuramente ci può far comodo in questi casi, ma in linea generale per poter scrivere meno righe di codice e garantire un po' di velocità di esecuzione in più (nella programmazione di giochi, ad esempio, la velocità e la fluidità sono un requisito fondamentale), sono una serie di suggerimenti, chiamiamoli pure trucchi anche se in realtà sono semplicemente buone pratiche, da applicare durante la stesura del nostro codice, ove può essere richiesto.

Premetto che questa lista di 10 punti non è esaustiva e sono ben consapevole che esistono molti altri di questi accorgimenti, tuttavia dove voglio focalizzarmi con questa breve raccolta sono quei casi che, quantomeno nella mia esperienza, si presentano più frequentemente e pertanto, in favore di un approccio che nonostante possa dare lo stesso risultato potrebbe appesantire alla lunga le prestazioni, porre attenzione al loro utilizzo permetterà di raggiungere una buona base di ottimizzazione.

Tutti gli esempi mostrati sono testati e funzionanti e riproducibili con risultato in console.

1 - Dichiarare le variabili con var
Purchè non sia prettamente necessario, è buona norma dichiarare le nuove variabili con var onde evitare che l'assegnazione di un valore a tale variabile venga interpretata a livello globale.
Esempio:

mia_prima_variabile = 1; // Variabile nuova dichiarata in modo non ottimizzato
var mia_seconda_variabile = 1 //Variabile nuova dichiarata in modo ottimizzato


2 - Convertire una variabile in boolean con l'operatore !!
Ci sono situazioni in cui è necessario sapere se una variabile esiste o se è valorizzata, per fare questo invece di verificarne la lunghezza, il tipo o utilizzare variabili di appoggio è possibile fare affidamento all'operatore !! (doppia negazione) che posto davanti ad una  variabile la convertirà automaticamente in boolean restituendo true se è valorizzata o false nel caso in cui sia: 0, null, "", undefined o NaN.
Esempio:

function Giocatore(nome, numero) {
    this.nome = nome;
    this.numero = numero;
    this.il_giocatore_esiste = !!numero;
}
var giocatore = new Giocatore('kobe bryant', 24);
console.log(giocatore.nome); // kobe bryant
console.log(giocatore.numero); // 24
console.log(giocatore.il_giocatore_esiste); // true

var giocatoreNonEsistente = new Giocatore('', 0);
console.log(giocatoreNonEsistente.nome);
console.log(giocatoreNonEsistente.numero); // 0
console.log(giocatoreNonEsistente.il_giocatore_esiste); // false


3 - Convertire una variabile in un numero direttamente con l'operatore +
Ovviamente funziona quando il valore di una stringa che si intende convertire in un numero è composto effettivamente da valori numerici, ad esempio '1234'. Se si tenta di convertire una stringa di caratteri alfanumerici, ad esempio  'abcd', il risultato sarà NaN (Not a Number).
E' interessante sapere che se tale operatore viene utilizzato con una data il risultato sarà il suo timestamp.
Esempio:

function convertiInNumero(str) {
    return +str;
}
console.log(convertiInNumero("1234")); // 1234
console.log(convertiInNumero("abcd")); // NaN
console.log(+new Date()) // 1462057847889


4 - Impostare il valore di default con l'operatore ||
Può capitare di dover inizializzare una variabile con un eventuale valore di default nel caso non gliene venisse assegnato uno effettivo o di dichiarare una variabile che però potrebbe già essere presente e valorizzata, come un array, in un altro punto del codice e nel caso specifico serve mantenere il valore corrente anzichè reinizializzarla (e perdere i valori correnti al suo interno).
Per queste situazioni è possibile utilizzare l'operatore || che verifica lo stato della variabile per agire di conseguenza alla sua valorizzazione o mantenimento del suo valore.
Esempio:

function Utente(nome, anni) {
    this.nome = nome || "Michele Pisani";
    this.anni = anni || 36;
}
var utente1 = new Utente();
console.log(utente1.nome); // Michele Pisani
console.log(utente1.anni); // 36

var utente2 = new Utente("Kobe Bryant", 38);
console.log(utente2.nome); // Kobe Bryant
console.log(utente2.anni); // 38

//Altro esempio di valorizzazione del contenuto gia' presente o inizializzazione di una variabile
var mioArray = mioArray || [];


5 - Passare direttamente la lunghezza dell'array in un ciclo
Nella creazione di un ciclo, per fretta o per test, capita di scrivere del codice simile al seguente:

var mioArray = [1,2,3,4,5,6,7,8,9];
for (var i = 0; i < mioArray.length; i++) {
    console.log(mioArray[i]);
}


Per quanto a tutti gli effetti non ci sia niente di sbagliato e lavorando con matrici piccole non se ne percepisca la necessità, quando la funzione elabora array più grandi il codice di cui sopra manifesterà una perdita di prestazioni in quanto ad ogni iterazione del ciclo verrà ricalcolata la dimensione dell'array. E' pertanto consigliato immagazzinare in una variabile la lunghezza dell'array, in modo che essa venga calcolata una sola volta, ed utilizzare tale variabile come riferimento per il numero di iterazioni che dovranno essere eseguite.
Esempio:

var mioArray = [1,2,3,4,5,6,7,8,9];
var mioArrayLen = mioArray.length; // immagazzino la lunghezza dell'array in una variabile
for (var i = 0; i < mioArrayLen; i++) {
    console.log(mioArray[i]);
}
 

6- Troncare un array, azzerarlo o recuperare i suoi ultimi elementi
E' possibile utilizzare la proprietà length sia per ridurre il numero di elementi di un array sia per, con lo stesso principio, azzerarlo.
Tramite invece la proprietà slice, impostando un valore negativo come parametro, è possibile recuperare l'ultimo o gli ultimi elementi di un array, in questo modo si possono evitare diversi passaggi per ottenere lo stesso risultato.
Esempio:

// Recuperare l'ultimo elemento di un array
var mioArray = [1,2,3,4,5,6,7,8,9,10];
console.log(mioArray.slice(-1)); // [10]
console.log(mioArray.slice(-2)); // [9, 10]

// Troncare un array
console.log(mioArray.length); // 10
mioArray.length = 5;
console.log(mioArray.length); // 5
console.log(mioArray); // [1, 2, 3, 4, 5]

// Azzerare un array
mioArray.length = 0;
console.log(mioArray.length); // 0
console.log(mioArray); // []
 

7 - Arrotondare un numero ad N cifre decimali
Per farlo basta semplicemente utilizzare la proprietà toFixed e passare come parametro il numero di cifre decimali che intendiamo lasciare.
Faccio notare che nell'esempio ho aggiunto l'operatore + (come mostrato al punto 3 di questo articolo) per convertire il risultato in un numero altrimenti il valore verrebbe interpretato come una stringa e ad una eventuale successiva operazione, ad esempio di somma, il risultato non sarà quello aspettato bensì una concatenazione.
Esempio:

var mioNumero = 15.67485738453;
mioNumero = +mioNumero.toFixed(4);  // 15.6748
console.log(mioNumero);


8 - Recuperare un elemento a caso da un array
Una situazione che spesso può far comodo (soprattutto in ambito Gaming ma non solo) e che può essere ottenuta semplicemente con una formula.
Esempio:

var mioArray = [15, 'michele' , 1 , 72 , 'margherita' , 'lupin' , 2354, , 'federica' , 3 , 435, 998, 'laura', 34, 'francesco'];
var  randomElemento = mioArray[Math.floor(Math.random() * mioArray.length)];
console.log(randomElemento);


9 - Rimuovere spazi all'inizio e alla fine di una stringa con la proprietà trim
Da qualche tempo a questa parte nel motore di Javascript è stata introdotta nativamente la proprietà trim, che funziona allo stesso modo come in linguaggi di programmazione quali ASP, PHP, ecc., e serve a rimuovere gli spazi superflui (e spesso fastidiosi a seconda delle operazioni da svolgere) che possono essere presenti all'inizio e alla fine di una stringa. Pertanto, a differenza di come qualcuno può essere abituato a fare prima dell'introduzione di tale proprietà ovvero con funzioni macchinose o meglio con una regex, conviene affidarsi direttamente alla proprietà trim.
Esempio:

var miaStringa = ' ciao, come stai? ';
console.log(miaStringa.trim());


10 - Usare l'operatore di uguaglianza === al posto di == ed i casi in cui un valore è sempre considerato false
L'operatore == svolge automaticamente, se la situazione lo richiede, una conversione del tipo di variabile per performarne il confronto. Con il === si confronta invece in maniera diretta sia il tipo che il valore delle variabili chiamate in causa, evitando quindi il passaggio in più.
Ci sono inoltre dei casi in cui il confronto è evitabile in quanto il valore è sempre false, questi casi sono: undefined, null, 0, false, NaN e '' (stringa vuota). Convertendo in boolean una variabile che contiene uno di questi valori (come abbiamo visto al punto 2 di questo articolo) il risultato sarà sempre false.

// == contro ===
console.log('10' == 10);     // is true
console.log('10' === 10);    // is false

// undefined, null, 0, false, NaN, '' corrispondono sempre a false
console.log(!!10) //true
console.log(!!undefined) // false
console.log(!!null) // false
console.log(!!0) // false
console.log(!!false) // false
console.log(!!NaN) // false
console.log(!!'') // false



Mettendo in pratica nei propri script questi piccoli accorgimenti i risultati saranno senz'altro più performanti, soprattutto nel campo delle app ibride dove i processori su cui queste andranno a girare ti saranno molto grati (e market ostici come quello della Apple avranno una scusa in meno per bloccare la pubblicazione dell'app).

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Umberto

Grazie Michele, in realtà faccio un po' fatica a districarmi con l'assistenza di FB... Ora provo e …

Michele Pisani

Ciao Umberto,
hai provato a contattare il supporto tramite la community?

Umberto

Salve, dopo un paio di mesi di tentativi e di modifiche, sono riuscito a far partire la procedura …

Rosa

Salve. Sto unendo due Pagine. Tutto è stato da me 'omogeneizzato', quindi coi nomi simili ci siamo …