Herramienta para medir el tiempo de renderizado

Question

¿Existe alguna herramienta para medir el tiempo real de procesamiento de un elemento (s) en una página? No me refiero al tiempo de descarga de los recursos, sino al tiempo real que el navegador tardó en generar algo. Sé que esta vez podría variar según los factores en la máquina del cliente, pero sería muy útil para saber lo que tarda un rato en cargar el motor de renderizado. Me imagino que esto debería ser una utilidad útil ya que las aplicaciones web se están volviendo bastante pesadas para los clientes ahora. ¿Alguna idea?

Answer 1

He estado usando este script para analizar el tiempo de renderizado de algunas páginas:

<script language="JavaScript"> 
<? 

    $output = str_replace('=', 'A', base64_encode(file_get_contents('data.txt'))); 

    echo "\tCode = \"" . substr($output, 0, 512) . "\""; 
    $size = strlen($output); 
    for ($i = 512; $i < $size; $i += 512) 
     echo "\n\t  + \"" . substr($output, $i, 512) . "\""; 
    echo ";\n"; 

?> 
    Data = ""; 
    Dict = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/"; 

    j = Code.length -3; 
    for (i = 0; i < j; i += 4) { 
     Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i )) << 2) | (Dict.indexOf(Code.charAt(i + 1)) >> 4)) & 0xff); 
     Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i + 1)) << 4) | (Dict.indexOf(Code.charAt(i + 2)) >> 2)) & 0xff); 
     Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i + 2)) << 6) | (Dict.indexOf(Code.charAt(i + 3)) )) & 0xff); 
    } 

    time_start = (new Date).valueOf()/1000; 
    document.write(Data); 
    time_elapsed = (new Date).valueOf()/1000 - time_start; 

    alert(time_elapsed); 

</script>

Parte PHP, JavaScript parte. data.txt es el archivo que contiene el HTML para analizar. Probado en IE y FF.

Answer 2

Puede consultar YSlow.

Editar: Me parece que firebug muestra el tiempo de renderizado con una línea azul y roja en el panel de la red.

Answer 3

Sugeriría YSlow.

No solo mide los tiempos de rendimiento de los elementos en su página, sino que también analiza el diseño de su página para sugerir cómo puede mejorar el rendimiento. Es una de las herramientas que utilizaron en el desarrollo de Stack Overflow.

Yahoo! YSlow

YSlow analiza las páginas web y sugiere maneras de mejorar su rendimiento en base a un conjunto de reglas para altas prestaciones páginas web. YSlow es un complemento de Firefox integrado con la herramienta de desarrollo web Firebug . YSlow califica la página web según uno de tres conjuntos de reglas predefinidos o un conjunto de reglas definido por el usuario. Ofrece sugerencias para mejorar el rendimiento de la página, resume los componentes de la página, muestra estadísticas sobre la página, y proporciona herramientas para el rendimiento análisis, incluyendo Smush.it ™ y JSLint.

Answer 4

Firebug para Firefox lo tiene integrado en el "Net" -Tab.

Necesidades Firefox (lo hice con la versión 12.0) de configuración modificado, tipo about:config en la barra de direcciones y luego buscar dom.send_after_paint_to_content

Establecer dom.send_after_paint_to_content true.

MozAfterPaint se pinta como líneas verticales verdes pequeñas en la línea de tiempo de carga de la red, además de las líneas azules (DOMContentLoaded) y roja (carga).