Strumento per misurare Tempo di rendering

Question

C'è uno strumento là fuori per misurare il tempo di rendering effettivo di un elemento (s) su una pagina? Non intendo il tempo di scaricamento delle risorse, ma il tempo effettivo impiegato dal browser per eseguire il rendering di qualcosa. So che questa volta cambierà in base a fattori sulla macchina client, ma sarebbe comunque molto utile sapere cosa richiede un po 'di tempo per caricare il motore di rendering. Immagino che questa dovrebbe essere un'utilità utile poiché le app web stanno diventando piuttosto pesanti per i clienti. qualche idea?

Answer 1

Sto usando questo script per analizzare il tempo di rendering di alcune pagine:

<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 è il file contenente l'HTML da analizzare. Testato su IE e FF.

Answer 2

È possibile verificare YSlow.

Modifica: Mi sembra che firebug mostri il tempo di rendering con una linea blu e rossa nel pannello netto.

Answer 3

Suggerirei YSlow.

Non solo misura i tempi di esecuzione degli elementi nella pagina ma analizza anche il design della pagina per suggerire come è possibile migliorare le prestazioni. È uno degli strumenti utilizzati nello sviluppo di Stack Overflow.

Yahoo! YSlow

YSlow analizza le pagine web e suggerisce modi per migliorare le loro prestazioni sulla base di una serie di regole per pagine web prestazioni elevate. YSlow è un componente aggiuntivo per Firefox integrato con lo strumento di sviluppo web Firebug . YSlow pagina web basata su uno dei tre set di regole predefinite o un set di regole definito dall'utente. Offre suggerimenti per migliorando le prestazioni della pagina, riassume i componenti della pagina, visualizza le statistiche relative alla pagina, e fornisce gli strumenti per le prestazioni analisi, tra cui Smush.it ™ e JSLint.

Answer 4

Firebug per Firefox lo ha integrato nel "Net" -Tab.

Needs Firefox (l'ho fatto con la versione 12.0) configurazione modificata, tipo about:config nella barra degli indirizzi e quindi cercare dom.send_after_paint_to_content

Impostare dom.send_after_paint_to_content su true.

MozAfterPaint viene quindi dipinto come piccole linee verticali verdi nella timeline di caricamento della rete oltre alle linee blu (DOMContentLoaded) e rosse (carico).