Optimización general de JavaScript

JavaScript, como cualquier otro lenguaje de programación, tiene sus cosas buenas y malas, pero, sobre todo, al ser un lenguaje que se puede interpretar y que se ejecuta en el navegador cliente, vale la pena aplicar una serie de reglas básicas.

Evitar las variables globales es una idea bastante buena ya que el rendimiento de dichas variables es bastante bajo. En el caso de ejecutar varios códigos es probable que se sobrescriban dichas variables. Para ello podríamos tener elementos de este estilo que se protegen de accesos externos o la posibilidad de ser sobrescritos.

miNameSpace = function() {
  var current = null;
  function init() {...}
  function change() {...}
  return {
    init:init,
    set:change
  }
}();

Otro detalle importante es el uso de un código lo más estricto posible, es decir, un código que se ajuste a cualquier motor que interprete JavaScript y sea fácilmente interpretable. Para verificar que estamos usando un código correcto podemos hacer uso de herramientas como JSLint.

Es mejor no cambiar valores por defecto del DOM en los valores de los elementos (sobre todo en aquellos que hacen referencia a los estilos), sino modificarlos haciendo cambios en clases que se aplican a dichos elementos. Por ejemplo, podemos aplicar unos cambios tales que:

inputs.style.borderColor = '#f00';
inputs.style.borderStyle = 'solid';
inputs.style.borderWidth = '1px';

O podemos hacer un cambio más sencillo, tal que este:

inputs.className += ' error';

Y que esta clase “error” sea la que haga el cambio en el estilo, sin modificar directamente los elementos.

Es mejor utilizar la anotación corta para crear objetos o arrays. De esta forma, un objeto tal que este:

var perro = new Object();
perro.color = 'negro';
perro.tamano = 'grande';

Podría crearse mucho más eficiente así:

var perro = {
  color: 'negro',
  tamano = 'grande'
};

Con un array pasaría lo mismo. Si tenemos algo así:

var series = new Array();
series[0] = 'Fringe';
series[1] = 'The Big Bang Theory';

Sería mucho más eficiente creándose así:

var series = [
  'Fringe',
  'The Big Bang Theory'
];

Otra forma de optimizar código puede ser reduciendo los condicionales. De esta forma un condicional habitual tal que:

var direccion;
if(x > 10) {
  direccion = 1;
} else {
  direccion = -1;
}

Podría llegar a reducirse a un código tal que:

var direccion = (x > 100) ? 1 : -1;

Otra acción sencilla que permite mejorar el rendimiento es el de optimizar los bucles. Un bucle habitual podría ser este:

var beatles = ['George','Ringo','Paul','John'];
for(var i=0; i<beatles.length; i++) {
  Actuan(beatles[i]);
}

Tendría una opción mejorada tal que así, creando las variables sólo una vez:

var beatles = ['George','Ringo','Paul','John'];
for(var i=0, j=beatles.length; i<j; i++) {
  Actuan(beatles[i]);
}