Narzędzie do pomiaru czasu renderowania

Question

Czy istnieje narzędzie do mierzenia rzeczywistego czasu renderowania elementu (elementów) na stronie? Nie mam na myśli czasu pobierania zasobów, ale rzeczywisty czas, w którym przeglądarka wzięła udział w renderowaniu. Wiem, że ten czas będzie się różnić w zależności od czynników na komputerze klienta, ale nadal będzie bardzo przydatny w poznaniu tego, co ładowanie silnika renderującego zajmuje trochę czasu. Wyobrażam sobie, że powinno to być użyteczne narzędzie, ponieważ aplikacje internetowe stają się teraz dość ciężkim klientem. jakieś pomysły?

Answer 1

Używam tego skryptu do analizy czasu renderowania niektórych stronach:

<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>

Część PHP, część JavaScript. data.txt to plik zawierający kod HTML do analizy. Testowany na IE i FF.

Answer 2

Możesz sprawdzić YSlow.

Edycja: Wydaje mi się, że firebug pokazuje czas renderowania niebieską i czerwoną linią w panelu sieci.

Answer 3

Proponuję YSlow.

Nie tylko mierzy czasy wydajności elementów na stronie, ale analizuje również projekt strony, aby zasugerować, w jaki sposób można poprawić wydajność. Jest to jedno z narzędzi, które zastosowano w rozwoju przepełnienia stosu.

Yahoo! YSlow

YSlow analizuje strony internetowe i sugeruje sposobów poprawy ich wydajności oparciu o zestaw reguł dla wysokich stron internetowych wydajność. YSlow to dodatek do przeglądarki Firefox z zintegrowany z narzędziem do tworzenia stron internetowych Firebug . YSlow ocenia stronę internetową na podstawie jednego z trzech wstępnie zdefiniowanych zestawów reguł lub zdefiniowanego przez użytkownika zestawu reguł . Oferuje on propozycje poprawę ich stronie, w podsumowuje elementy strony, w wyświetla statystyki dotyczące strony, i dostarcza narzędzi do analizy wydajności , w tym Smush.it ™ i JSLint.

Answer 4

Firebug dla przeglądarki Firefox ma to zintegrowane z "Net" -Tab.

Needs Firefoksa (zrobiłem to z wersji 12.0) konfiguracja modyfikowana, typ about:config w pasku adresu, a następnie wyszukać dom.send_after_paint_to_content

Ustaw dom.send_after_paint_to_content true.

MozAfterPaint jest następnie malowany jako małe zielone pionowe linie na osi czasu ładowania sieci oprócz niebieskich (DOMContentLoaded) i czerwonych (obciążenie) linii.