Upload
julio-cesar-silva-guzman
View
56
Download
3
Tags:
Embed Size (px)
Citation preview
Orden de renderización
● Se analiza los nodos visibles en el DOM.● Los nodos no visibles se omiten.● Los nodos que se ocultan con CSS se omiten también. ● Para cada nodo visible busca y aplica su estilo desde
el CSSOM.● Muestra los nodos visibles.
Problema 1 : CSS retrasa la visualización
MEDIA QUERIES
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 125px)" />
Problema 2 : Javascript
● Recordando la secuencia ….● La creación de DOM se pone en pausa.● Javascript puede enviar consultas a DOM y CSSOM y
modificarlos.● La ejecución de JavaScript se retrasa hasta que
CSSOM esté a punto.
Síncrono Asíncrono
CASOS
Marcas en el tiempo y Navigation Timing API
Prueba con marcas
Analizar y “MEDIR” todo
MEJORA LA CONVERSIÓN
EjemplosSolo HTML
Con CSS y JSCON JS Asincrono
Chrome DevTools https://developer.chrome.com/devtools
Explorar DevTools http://discover-devtools.codeschool.com/
Casos de estudiohttp://www.google.com/think/multiscreen/success.html
Recursos