Mejorar rendimiento JQueryMobile y PhoneGap

   Quienes hemos utilizado JQueryMobile y PhoneGap para crear Apps nativas mediante HTML5, CSS y JavaScript, habremos notado la abismal diferencia con respecto al rendimiento entre utilizar este hibrido y una App Nativa (leer el artículo no estaría mal), sin embargo no todo esta perdido. A continuación unos TIPS en la configuración global que nos facilitaran la vida al momento de crear nuestras Apps.

   Estas opciones las definimos justo al iniciar, para ello hacemos un "bind" al evento...

$(document).bind("mobileinit", function(){
    /* OPCIONES */
});

1. Utiliza el evento 'vclick'

   Si nos guiamos por la documentación notamos que es un evento virtualizado de los que ya conocemos (click, touchstart, mousedown, etc), se encarga de simular el evento onClick en dispositivos móviles. Aunque es más rápido si se trata de un simple botón debemos tener cuidado, ya que el evento puede dispararse justo después de la acción (ejemplo, cambiar un contenido);

$(document).on("vclick", "p", function(){
    alert('evento vclick!');
});

2. Procura utilizar el mismo evento para otros elementos

   Suena algo confuso y difícil de entender, pero es más simple de lo que pensamos. Supongamos que tenemos 2 elementos igual que el anterior, ambos con un Id, por lo que es válido hacer algo como esto:

$(document).on("vclick", "p#elemA", function(){
    alert("Elemento 1");
});
$(document).on("vclick", "p#elemB", function(){
        alert("Elemento 2");
});
$(document).on("vclick", "p#elemC", function(){
        alert("Elemento 3");
});

   Ahora veamos como optimizar esto:

$(document).on("vclick", "p", function(){
    switch($(this).attr("id")){
        case "elemA": alert("Elemento 1"); break;
        case "elemB": alert("Elemento 2"); break;
        case "elemC": alert("Elemento 3"); break;
    }
});

3. Almacena en cache las variables frecuentes

   Igual que en el dato anterior, lo mas común es utilizar "$(document)" al utilizar eventos, esto implica cargar una y otra vez el mismo valor, para verlo mas claro:

$document = $(document);

$document.on("vclick", "p#elemA", function(){
    alert("Elemento 1");
});
$document.on("vclick", "a#elemB", function(){
        alert("Elemento 2");
});
$document.on("vclick", "h1#elemC", function(){
        alert("Elemento 3");
});

   NOTA: utilizar el símbolo dolar ($) en la variable no implica nada, esto es solo para que sea más legible el código y así saber que se hace una referencia a una variable jQuery y no una variable interna del script.

4. Agrupa los diferentes eventos de un elemento

   Esto aplica tanto para móviles como aplicaciones de escritorio, siguiendo el ejemplo:

$document.on("vclick", "p#elemA", function(){
    alert("Elemento 1");
}).on("vclick", "a#elemB", function(){
        alert("Elemento 2");
}).on("vclick", "h1#elemC", function(){
        alert("Elemento 3");
});

   En caso de que necesitemos varios eventos:

$document.on({
    mouseenter: function() {
        // Evento mouseenter...
    },
    mouseleave: function() {
        // Evento mouseleave...
    },
    'click blur focus' : function() {
        // Evento click, blur y focus...
    }
}, "input");

5. Define CORS

   JQueryMobile ajusta este valor por defecto según las propiedades del navegador, todos los navegadores modernos (móviles del 2010 en adelante) sin embargo en algunos dispositivos extrañamente lo inhabilita, asi que solo debemos definir este valor por defecto:

$.support.cors = true

6. Habilita CDP

   Cuando el framework intenta acceder a cualquier página dentro de la aplicación se hace una llamada a "$.mobile.loadPage()" (PageContainer en las versiones 1.4.0+), si analizamos esto vemos que se procesa el hashtag (#) dentro de la URL, es por ello que por defecto encontramos esta opción deshabilitada y evitamos cualquier ataque, por lo que vamos a cambiar eso:

$.mobile.allowCrossDomainPages = true

7. Desactiva las transiciones por defecto

   Los efectos en este framework son una de las principales cuasas del pésimo rendimiento, sin embargo los desarrolladores notaron esto y desde la versión 1.4.0 se corrigió este pequeño detalle de no colocar ninguna transición por defecto:

$.mobile.defaultPageTransition = 'none'

8. No utilices el Delay de los botones al hacer hover

   Hacer esto hará que nuestra App se vea mucho mas fluida, sin embargo también aplica al momento de hacer un scroll, así que debemos tener cuidado con esto:

$.mobile.buttonMarkup.hoverDelay = true
$.mobile.hoverDelay = true //1.4.0+

9. Activa los menús nativos

   Al igual que las transiciones, los "selects" nos retrasan una cantidad considerable en tiempos de respuesta, podemos utilizar esta opción en caso de que la estética de nuestra App no se vea afectada y realmente tengamos muchos de estos elementos:

$.mobile.selectmenu.prototype.options.nativeMenu = true

   Un TIP extra es utilizar la cache en peticiones AJAX, esto mejorará nuestro rendimiento si utilizamos enlaces externos dentro de nuestra App.

Recibe notificaciones por correo