En qué miente la emulación de dispositivo

La emulación reproduce fielmente la geometría y miente sobre casi todo lo demás. Esa asimetría no sería un problema si estuviera clara, y no lo está: la palabra “emulación” y el hecho de ver un marco de teléfono en pantalla producen una confianza que el mecanismo no merece. Enumerar exactamente lo que no reproduce es lo que permite decidir cuándo basta y cuándo hay que conectar un cable.

Las siete mentiras

Uno: la CPU. Sigue siendo la de tu ordenador. Un móvil de gama media tiene un rendimiento de un solo hilo varias veces inferior, y de gama baja, un orden de magnitud. La ralentización de CPU se aproxima a esto y tiene sus propios límites, que se tratan en la lección siguiente.

Dos: la GPU y la memoria de vídeo. El compositor de tu equipo es incomparablemente más capaz. Los problemas de demasiadas capas, de superficies enormes y de rasterización lenta no aparecen en la emulación.

Tres: la memoria disponible. Un móvil con poca memoria mata pestañas de fondo, y una aplicación pesada puede provocar que el sistema descarte la pestaña entera, con el efecto visible de que al volver la página se recarga desde cero. Tu equipo con mucha memoria no lo reproduce nunca.

Cuatro: la reducción térmica. Un teléfono trabajando al máximo se calienta y reduce su frecuencia a los pocos minutos. Todas tus mediciones de emulación corresponden a un dispositivo frío.

Cinco: la red real. El throttling simula una tubería limpia y constante, no una red celular con pérdida de paquetes, variabilidad y coste de activación de la radio.

Seis: el táctil real. La emulación genera eventos táctiles con el ratón, con un solo punto de contacto, con precisión de píxel, sin la latencia del panel táctil real, sin gestos del sistema y sin la interferencia del teclado virtual, que en un móvil cambia el tamaño del área visible cuando aparece.

Siete, y la más grande: el motor de renderizado. Emular un teléfono de otra plataforma sigue ejecutando el mismo motor que tienes. Se cambia una cadena de identificación y un tamaño de ventana, nada más.

Los síntomas que exigen hardware real

Seis situaciones en las que la emulación no puede ayudar y hay que conectar un dispositivo.

“Va bien en el emulador y a tirones en el móvil.” Casi siempre es GPU, capas o memoria. Ninguna de las tres se emula.

“Se recarga solo al volver a la pestaña.” El sistema descartó el proceso por presión de memoria.

“Va bien al principio y peor a los minutos.” Reducción térmica, o una fuga que en tu equipo con memoria de sobra no molesta.

“El teclado tapa el campo.” El teclado virtual cambia el área visible de formas que dependen del sistema y del navegador.

“Solo pasa en el navegador de otra plataforma.” Por definición.

“El gesto no funciona.” Los gestos del sistema, los de retroceso desde el borde y los desplazamientos con inercia son distintos en cada plataforma.

Estimar el desfase de rendimiento

Antes de decidir cuánta ralentización aplicar, conviene saber cuánto más lento es realmente el dispositivo objetivo. La medición es sencilla: ejecutar la misma carga de trabajo en los dos y comparar.

// Referencia de rendimiento comparable entre maquinas y dispositivos
(async () => {
  const medir = (nombre, fn) => {
    // Una pasada de calentamiento para que el motor optimice
    fn();
    const t0 = performance.now();
    const r = fn();
    const ms = performance.now() - t0;
    return { prueba: nombre, ms: Math.round(ms), resultado: typeof r };
  };

  const resultados = [];

  resultados.push(medir('aritmetica', () => {
    let x = 0;
    for (let i = 0; i < 3e6; i++) x += Math.sqrt(i) % 7;
    return x;
  }));

  resultados.push(medir('cadenas', () => {
    let s = '';
    for (let i = 0; i < 60000; i++) s += 'abc' + i;
    return s.length;
  }));

  resultados.push(medir('objetos', () => {
    const a = [];
    for (let i = 0; i < 200000; i++) a.push({ i, v: 'valor' + i });
    return a.reduce((s, o) => s + o.i, 0);
  }));

  resultados.push(medir('json', () => {
    const datos = Array.from({ length: 20000 }, (_, i) => ({ id: i, nombre: 'fila ' + i, activo: i % 2 === 0 }));
    return JSON.parse(JSON.stringify(datos)).length;
  }));

  resultados.push(medir('dom', () => {
    const host = document.createElement('div');
    host.style.cssText = 'position:absolute;left:-9999px';
    document.body.append(host);
    for (let i = 0; i < 4000; i++) {
      const d = document.createElement('div');
      d.className = 'fila';
      d.textContent = 'contenido ' + i;
      host.append(d);
    }
    void host.offsetHeight;   // forzar disposicion
    const n = host.children.length;
    host.remove();
    return n;
  }));

  console.table(resultados);
  const total = resultados.reduce((s, r) => s + r.ms, 0);
  console.log('TOTAL:', total, 'ms');
  console.log('Ejecuta esto mismo en el dispositivo objetivo por depuracion remota');
  console.log('y divide: ese cociente es tu factor de ralentizacion real.');
})();

El cociente entre el total del dispositivo y el de tu máquina es el factor de ralentización que deberías usar, en lugar de un número redondo elegido por costumbre. Es una medición de diez minutos que da un número específico de tu público y de tu equipo, y que además cambia con el tiempo: tu portátil se renueva y el teléfono de tus usuarios no.

Fíjate en que la última prueba mide manipulación del documento y disposición, que escalan de forma distinta a la aritmética pura. En muchos dispositivos, el cociente de esa prueba es notablemente peor que el de las anteriores, y como el trabajo real de una aplicación web está lleno de manipulación del documento, es la más representativa de las cinco.

Qué se puede y qué no se puede concluir

Esa tabla es el resumen operativo del nivel: la emulación resuelve la mitad geométrica del problema móvil y ninguna de la mitad física.