mozilla

Compare Revisions

Navigation Timing

Change Revisions

Revision 22832:

Revision 22832 by grendel on

Revision 22833:

Revision 22833 by ernestd on

Title:
Navigation Timing
Navigation Timing
Slug:
Navigation_timing
Navigation_timing
Content:

Revision 22832
Revision 22833
nn7    <p>
8      The Navigation Timing API provides data that can be used to
 > measure the performance of a website.&nbsp;Unlike other JavaScri
 >pt-based mechanisms that have been for the same purpose this API 
 >can provide end-to-end latency data that can be more useful and a
 >ccurate.
9    </p>
10    <p>
11      The following example shows how you can measure the perceiv
 >ed loading time:
12    </p>
13    <pre>
14function onLoad() { 
15  var now = new Date().getTime();
16  var page_load_time = now - performance.timing.navigationStart;
17  alert("User-perceived page loading time: " + page_load_time);
18}
19 
20</pre>
21    <p>
22      There are many measured events given in milliseconds that c
 >an be accessed through the <code>window.performance.timing</code>
 > object. The list of events in order of occurrance are:
23    </p>
24    <ul>
25      <li>navigationStart
26      </li>
27      <li>unloadEventStart
28      </li>
29      <li>unloadEventEnd
30      </li>
31      <li>redirectStart
32      </li>
33      <li>redirectEnd
34      </li>
35      <li>fetchStart
36      </li>
37      <li>domainLookupStart
38      </li>
39      <li>domainLookupEnd
40      </li>
41      <li>connectStart
42      </li>
43      <li>connectEnd
44      </li>
45      <li>secureConnectionStart
46      </li>
47      <li>requestStart
48      </li>
49      <li>responseStart
50      </li>
51      <li>responseEnd
52      </li>
53      <li>domLoading
54      </li>
55      <li>domInteractive
56      </li>
57      <li>domContentLoadedStart
58      </li>
59      <li>domContentLoadedEnd
60      </li>
61      <li>domComplete
62      </li>
63      <li>loadEventStart
64      </li>
65      <li>loadEventEnd
66      </li>
67    </ul>
68    <p>
69      The <code>window.performance.navigation</code> object store
 >s two attributes that can be used to know if a page load is trigg
 >ered by a redirect, back/forward button or normal URL load.
70    </p>
71    <h4>
72      window.performance.navigation.type:
73    </h4>
74    <p>
75      &nbsp;
76    </p>
77    <table class="standard-table" style="font-size: 14px;">
78      <thead>
79        <tr>
80          <th scope="col">
81            Constant
82          </th>
83          <th scope="col">
84            Value
85          </th>
86          <th scope="col">
87            Description
88          </th>
89        </tr>
90      </thead>
91      <tbody>
92        <tr>
93          <td>
94            <a name="const_next" id="const_next"><code>TYPE_NAVIG
 >ATENEXT</code></a>
95          </td>
96          <td>
97            0
98          </td>
99          <td>
100            This cursor includes duplicates, and its direction is
 > monotonically increasing in the order of keys.
101          </td>
102        </tr>
103        <tr>
104          <td>
105            <a name="const_next_no_duplicate" id="const_next_no_d
 >uplicate"><code>TYPE_RELOAD</code></a>
106          </td>
107          <td>
108            1
109          </td>
110          <td>
111            This cursor does not include duplicates, and its dire
 >ction is monotonically increasing in the order of keys. If multip
 >le records exist with the same key, only the first one is retriev
 >ed.
112          </td>
113        </tr>
114        <tr>
115          <td>
116            <a name="const_prev" id="const_prev"><code>TYPE_BACK_
 >FORWARD</code></a>
117          </td>
118          <td>
119            2
120          </td>
121          <td>
122            This cursor includes duplicates, and its direction is
 > monotonically decreasing in the order of keys.
123          </td>
124        </tr>
125        <tr>
126          <td>
127            <a name="const_prev_no_duplicate" id="const_prev_no_d
 >uplicate"><code>TYPE_UNDEFINED</code></a>
128          </td>
129          <td>
130            255
131          </td>
132          <td>
133            This cursor does not include duplicates, and its dire
 >ction is monotonically decreasing in the order of keys. If multip
 >le records exist with the same key, only the first one iterated t
 >o is retrieved.
134          </td>
135        </tr>
136      </tbody>
137    </table>
138    <p>
139      <code>window.performance.navigation.redirectCount</code> wi
 >ll indicate how many redirects have taken place until the final p
 >age has been reached, if any.
140    </p>
141    <p>
142      The Navigation Timing API can be used to gather performance
 > data on the client side to be sent to a server via XHR as well a
 >s measure data that was very difficult to measure by other means 
 >such as time to unload a previous page, domain look up time, wind
 >ow.onload total time, etc.
143    </p>
144    <h3>
145      Examples
146    </h3>
147    <p>
148      Calculate the total time required to load a page:
149    </p>
150    <pre>
151var perfData = window.performance.timing; 
152var pageLoadTime = perfData.loadEventEnd – perfData.navigationSta
 >rt;
153</pre>
154    <p>
155      Calculate request response times:
156    </p>
157    <pre>
158var connectTime = perfData.responseEnd - perfData.requestStart;
159</pre>
n115        Further readingn268        Links
tt271        <li>
272          <a class=" external" href="http://webtimingdemo.appspot
 >.com/" title="http://webtimingdemo.appspot.com/">Test Page</a>
273        </li>

Back to History