javascript eficiente

• V8 en Chrome
• SpiderMonkey en Firefox
• Chakra en Internet Explorer
  
• Carakan en Opera

• Base Compiler o compilador base
• Object model o modelo de objetos
• Runtime profiler
• Optimizing Compiler o compilador optimizador
• Desoptimizaciones
• Garbage Collector (GC) o recolector de basura

1. Parsea el código javascript
2. Genera código nativo
   antes de ejecutarlo

var o = { x: 1 }; 
delete o.x; // true 
o.x; // undefined

var o = { x: 1 }; 
o = null;
o; // null
o.x // TypeError

var myGlobalNamespace = {};

• Pon las variables en el scope adecuado (el más
  interior posible)
• Unbind de eventos que ya no se necesitan
  (¿desapareció el DOM del evento?)
• ¿Cacheas datos locales?
  Controla el descacheo y elimina lo viejo

function foo() {
    var bar = new LargeObject();
    bar.someCall();
}

function foo() {
    var bar = new LargeObject();
    bar.someCall();
    return bar;
}

// somewhere else
var b = foo();

function sum (x) {
    function sumIt(y) {
        return x + y;
    };
    return sumIt;
}

// Usage
var sumA = sum(4);
var sumB = sumA(3);
console.log(sumB); // Returns 7

var a = function () {
    var largeStr = new Array(1000000).join('x');
    return function () {
        return largeStr;
    };
}();

var a = function () {
    var smallStr = 'x';
    var largeStr = new Array(1000000).join('x');
    return function (n) {
        return smallStr;
    };
}();

var myObj = {
    callMeMaybe: function () {
        var myRef = this;
        var val = setTimeout(function () { 
            console.log('Time is running out!'); 
            myRef.callMeMaybe();
        }, 1000);
    }
};

myObj.callMeMaybe();

myObj = null

1. Utiliza una fuente local de datos
   con elementos con un id numérico
2. Pinta una tabla con estos ids
3. Añade eventos para alternar 
   una clase al hacer click
   en cualquier celda

• ¿Cómo almacenamos los datos?
• ¿Cómo escribimos una tabla
  eficientemente y la adjuntamos al DOM?
• ¿Cómo organizamos los eventos
  de una forma óptimo?

1. Guardamos los datos en un objeto
2. Almacenamos los objetos en un array
3. Con jQuery iteramos sobre los datos,
   pintando la tabla y la adjuntamos
   al DOM
4. Finalmente, enganchamos los eventos
   para gestionar los estilos.

• Si utilizamos solo los ids, en el array
  interesa solo guardar los ids
• Usar DocumentFragment y metodos
  nativos de DOM es más rápido (jQuery
  utiliza internamente DocumentFragment)
• Binding común de click, en lugar de a cada 
  td individual.

• Hay patrones de código que deshacen
  optimizaciones como el try-catch.
• Procura que tus funciones sean
  monomórficas, es decir, que las variables
  siempre sean de la misma clase oculta.
  NO HAGAS ESTO:

function add(x, y) { 
   return x+y;
} 

add(1, 2); 
add('a','b'); 
add(my_custom_object, undefined);

• No escribas funciones enormes,
  son más difíciles de optimizar
• Cuidado con elementos no inicializados

a = new Array();
for (var b = 0; b < 10; b++) {
  a[0] |= b;  // Oh no!
}
//vs.
a = new Array();
a[0] = 0;
for (var b = 0; b < 10; b++) {
  a[0] |= b;  // Much better! 2x faster.
}

• Si almacenas un listado de números
  o de objetos del MISMO TIPO, usa un array
• Si semánticamente necesitas un objeto con
  muchas propiedades, usa un objeto, será rápido
• Las propiedades indexados por un número son
  mucho más rápidas en array u objeto que las
  propiedades normales
  http://jsperf.com/performance-of-array-vs-object/3
  
• Las propiedades son más complicadas que
  los accesos a elementos de un array, y por tanto
  se pueden hacer menos optimizaciones.

function perf_sensitive() {
  // Resuelve aqui la funcionalidad sensible al rendimiento
}

try {
  perf_sensitive()
} catch (e) {
  // Gestiona la excepcion
}

• Crear objetos con una función de construcción 
  es más eficiente porque todos tienen la misma
  clase oculta
• No hay límite al número de objetos diferentes 
  o a su complejidad, pero...
• En los objetos calientes, intenta mantener
  las cadenas de prototipos (prototype chains)
  cortas y un bajo número de propiedades.

• Cuidado con los bucles for...in, nunca serán
  rápidos
• Lo más eficiente siempre será usar
  una función constructora (para usar en 
  código caliente):

function clone(original) {
  this.foo = original.foo;
  this.bar = original.bar;
}
var copy = new clone(original);

// Aquí V8 ve que quieres un array de 4 elementos con números:
var a = [1, 2, 3, 4];

// No hagas esto:
a = []; // V8 no sabe nada del array
for(var i = 1; i <= 4; i++) {
     a.push(i);
}

// Empty array
var arr = [];
for (var i = 0; i < 1000000; i++) {
    arr[i] = i;
}

// Pre-allocated array
var arr = new Array(1000000);
for (var i = 0; i < 1000000; i++) {
    arr[i] = i;
}

1. Mide: encuentra los puntos
   lentos de tu aplicación (≈45%)
2. Comprende: averigua cual es
   problema real (≈45%)
3. Arregla. (≈10%)

• Event Listeners. 
• Caches locales
• Almacenamiento en objetos en arrays y hashes
  que nunca se limpian
• Timers

• Cuando das a "Take SnapShot", fuerza al GC  y luego toma una foto
• #1 representa una línea base
• Los nodos amarillos en #2 son los nuevos añadidos por las acciones realizadas. 
• Las líneas punteadas representan los objetos asignados por las acciones correctamente tratados por el GC antes del snapshot.
• Hasta este punto, resulta dificil determinar si la memoria asignada es un leak o está intencionadamente dejada ahi (por ej, caches)
• Por lo tanto, realizamos las mismas tareas tomando un tercer snapshot.
• Tras el 3er snapshot, seleccionamos el  "Summary" del Snapshot 3 y filtramos para que
  muestre solo los objetos que han sido asignados entre el 1 y el 2. Ahora tenemos claros
   que los objetos alojados entre Snapshots 1 y 2 no deberían estar ahi, por lo que
  los objetosmostrados son potenciales leaks.

• Examina el camino que retiene a los objetos perdidos
• Si no se puede inferir fácilmente las referencias (p. ej. event listeners): 
  • instrumenta el constructor de los objetos mediante la consola para identificar mejor el stack trace
  • ejecuta el escenario de nuevo
• Arréglalo:
  • Desecha correctamente los objetos basura
  • unlisten() en event listeners

• Batch the metodos que lanzan reflows o repintan
• Mejorar procesar elementos fuera del DOM.
  Usando un DocumentFragment, por ejemplo.
• Por ejemplo, ¿cual es el problema del siguiente
  código?

function addDivs(element) {
  var div;
  for (var i = 0; i < 20; i ++) {
    div = document.createElement('div');
    div.innerHTML = 'Heya!';
    element.appendChild(div);
  }
}

function addDivs(element) {
  var div; 
  // Creates a new empty DocumentFragment.
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < 20; i ++) {
    div = document.createElement('a');
    div.innerHTML = 'Heya!';
    fragment.appendChild(div);
  }
  element.appendChild(fragment);
}
    

• Redimensionar la pantalla
• Cambiar la fuente
• Agregar o quitar una hoja de estilos
• Cambios en contenidos (como al escribir en un input) 
• Activación de psudo clases CSS como :hover 
• Manipulación del atributo class
• Un script que manipule el DOM
• Cálculos de medidas: offsetWidth y offsetHeight
• Cambiar una propiedad del atributo style