Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Navigation Timing

Autor: Piotr Karpiuk o piątek 3. Sierpień 2012

Pomiędzy kliknięciem przez internautę linku na stronie WWW a pojawieniem się na ekranie docelowej strony (czytaj: między ustami a brzegiem pucharu) zachodzi wiele zdarzeń, których pomiar czasowy jest interesujący z punktu widzenia webmastera zainteresowanego optymalizacją swojej witryny. Oprócz samej transmisji danych mamy jeszcze do czynienia m.in. z ewentualnymi przekierowaniami, przeszukiwaniem DNS, a nade wszystko istotnym dla webmastera procesem renderowania odebranych od serwera danych.

Navigation Timing to mechanizm wyspecyfikowany przez W3C a zaimplementowany już w większości przeglądarek, pozwalający na dostęp z poziomu JavaScriptu na stronie WWW do wyników bardzo dokładnego, nieinwazyjnego pomiaru czasu tych wszystkich zdarzeń związanych z ładowaniem strony.

Ile

Obiekt window.performance.timing zawiera właściwości (tutaj przykładowe wartości, czyli liczba ms od 1970-01-01, 0 oznacza „nie dotyczy”):

  connectEnd: 1345162846490                     loadEventStart: 1345162846538                
  connectStart: 1345162846490                   navigationStart: 1345162846490               
  domComplete: 1345162846538                    redirectEnd: 0                               
  domContentLoadedEventEnd: 1345162846538       redirectStart: 0                             
  domContentLoadedEventStart: 1345162846538     requestStart: 1345162846490                  
  domInteractive: 1345162846538                 responseEnd: 1345162846534                   
  domLoading: 1345162846534                     responseStart: 1345162846490                 
  domainLookupEnd: 1345162846490                secureConnectionStart: 0                     
  domainLookupStart: 1345162846490              unloadEventEnd: 0                            
  fetchStart: 1345162846490                     unloadEventStart: 0
  loadEventEnd: 1345162846538

Przystępny opis poszczególnych pól można znaleźć na stronie Microsoftu, ale być może lepiej spojrzeć na rysunek:


Zwróćmy uwagę np. na takie obliczenia:

  • czas komunikacji z docelowym serwerem: responseEnd - fetchStart,
  • czas przetwarzania danych przez przeglądarkę: loadEventEnd - responseEnd,
  • całkowity czas ładowania i renderowania strony: loadEventEnd - navigationStart,
  • czas trwania przekierowania: redirectEnd - redirectStart.

Jak

Obiekt window.performance.navigation daje dodatkowy wgląd w proces ładowania strony. Właściwość redirectCount mówi ile było przekierowań, a type to liczba całkowita informująca jak użytkownik dostał się na stronę, przy czym 0: kliknięcie na linku lub wprowadzenie URLa w przeglądarce, 1: przeładowanie strony, 2: użycie przycisku „Naprzód” lub „Wstecz” w przeglądarce.

Uwagi

  • W przeglądarce Microsoft Explorer chcąc skorzystać z Navigation Timing API, należy pilnować aby strona załadowała się w trybie standardów: konieczny jest znacznik <!doctype html> na początku pliku HTML.
  • Google Chrome udostępnia również dodatkowo obiekt window.performance.memory dający wgląd w zużycie pamięci przez JavaScript.

Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>