-
Notifications
You must be signed in to change notification settings - Fork 5
/
64_navigation_timing.js
148 lines (135 loc) · 10.1 KB
/
64_navigation_timing.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
/**
* dddddddd
* DDDDDDDDDDDDD tttt d::::::d
* D::::::::::::DDD ttt:::t d::::::d
* D:::::::::::::::DD t:::::t d::::::d
* DDD:::::DDDDD:::::D t:::::t d:::::d
* D:::::D D:::::D eeeeeeeeeeee ppppp ppppppppp rrrrr rrrrrrrrr eeeeeeeeeeee cccccccccccccccc aaaaaaaaaaaaa ttttttt:::::ttttttt eeeeeeeeeeee ddddddddd:::::d
* D:::::D D:::::D ee::::::::::::ee p::::ppp:::::::::p r::::rrr:::::::::r ee::::::::::::ee cc:::::::::::::::c a::::::::::::a t:::::::::::::::::t ee::::::::::::ee dd::::::::::::::d
* D:::::D D:::::D e::::::eeeee:::::eep:::::::::::::::::p r:::::::::::::::::r e::::::eeeee:::::ee c:::::::::::::::::c aaaaaaaaa:::::at:::::::::::::::::t e::::::eeeee:::::ee d::::::::::::::::d
* D:::::D D:::::De::::::e e:::::epp::::::ppppp::::::prr::::::rrrrr::::::re::::::e e:::::ec:::::::cccccc:::::c a::::atttttt:::::::tttttt e::::::e e:::::ed:::::::ddddd:::::d
* D:::::D D:::::De:::::::eeeee::::::e p:::::p p:::::p r:::::r r:::::re:::::::eeeee::::::ec::::::c ccccccc aaaaaaa:::::a t:::::t e:::::::eeeee::::::ed::::::d d:::::d
* D:::::D D:::::De:::::::::::::::::e p:::::p p:::::p r:::::r rrrrrrre:::::::::::::::::e c:::::c aa::::::::::::a t:::::t e:::::::::::::::::e d:::::d d:::::d
* D:::::D D:::::De::::::eeeeeeeeeee p:::::p p:::::p r:::::r e::::::eeeeeeeeeee c:::::c a::::aaaa::::::a t:::::t e::::::eeeeeeeeeee d:::::d d:::::d
* D:::::D D:::::D e:::::::e p:::::p p::::::p r:::::r e:::::::e c::::::c ccccccca::::a a:::::a t:::::t tttttte:::::::e d:::::d d:::::d
* DDD:::::DDDDD:::::D e::::::::e p:::::ppppp:::::::p r:::::r e::::::::e c:::::::cccccc:::::ca::::a a:::::a t::::::tttt:::::te::::::::e d::::::ddddd::::::dd
* D:::::::::::::::DD e::::::::eeeeeeee p::::::::::::::::p r:::::r e::::::::eeeeeeee c:::::::::::::::::ca:::::aaaa::::::a tt::::::::::::::t e::::::::eeeeeeee d:::::::::::::::::d
* D::::::::::::DDD ee:::::::::::::e p::::::::::::::pp r:::::r ee:::::::::::::e cc:::::::::::::::c a::::::::::aa:::a tt:::::::::::tt ee:::::::::::::e d:::::::::ddd::::d
* DDDDDDDDDDDDD eeeeeeeeeeeeee p::::::pppppppp rrrrrrr eeeeeeeeeeeeee cccccccccccccccc aaaaaaaaaa aaaa ttttttttttt eeeeeeeeeeeeee ddddddddd ddddd
* p:::::p
* p:::::p
* p:::::::p
* p:::::::p
* p:::::::p
* ppppppppp
*
*
*
* DDDDDDDDDDDDD NNNNNNNN NNNNNNNN tttt UUUUUUUU UUUUUUUU
* D::::::::::::DDD N:::::::N N::::::N ttt:::t U::::::U U::::::U
* D:::::::::::::::DD N::::::::N N::::::N t:::::t U::::::U U::::::U
* DDD:::::DDDDD:::::D N:::::::::N N::::::N t:::::t UU:::::U U:::::UU
* D:::::D D:::::D ooooooooooo N::::::::::N N::::::N ooooooooooo ttttttt:::::ttttttt U:::::U U:::::U ssssssssss eeeeeeeeeeee
* D:::::D D:::::D oo:::::::::::oo N:::::::::::N N::::::N oo:::::::::::oo t:::::::::::::::::t U:::::D D:::::U ss::::::::::s ee::::::::::::ee
* D:::::D D:::::Do:::::::::::::::o N:::::::N::::N N::::::No:::::::::::::::ot:::::::::::::::::t U:::::D D:::::Uss:::::::::::::s e::::::eeeee:::::ee
* D:::::D D:::::Do:::::ooooo:::::o N::::::N N::::N N::::::No:::::ooooo:::::otttttt:::::::tttttt U:::::D D:::::Us::::::ssss:::::se::::::e e:::::e
* D:::::D D:::::Do::::o o::::o N::::::N N::::N:::::::No::::o o::::o t:::::t U:::::D D:::::U s:::::s ssssss e:::::::eeeee::::::e
* D:::::D D:::::Do::::o o::::o N::::::N N:::::::::::No::::o o::::o t:::::t U:::::D D:::::U s::::::s e:::::::::::::::::e
* D:::::D D:::::Do::::o o::::o N::::::N N::::::::::No::::o o::::o t:::::t U:::::D D:::::U s::::::s e::::::eeeeeeeeeee
* D:::::D D:::::D o::::o o::::o N::::::N N:::::::::No::::o o::::o t:::::t tttttt U::::::U U::::::Ussssss s:::::s e:::::::e
* DDD:::::DDDDD:::::D o:::::ooooo:::::o N::::::N N::::::::No:::::ooooo:::::o t::::::tttt:::::t U:::::::UUU:::::::Us:::::ssss::::::se::::::::e
* D:::::::::::::::DD o:::::::::::::::o N::::::N N:::::::No:::::::::::::::o tt::::::::::::::t UU:::::::::::::UU s::::::::::::::s e::::::::eeeeeeee
* D::::::::::::DDD oo:::::::::::oo N::::::N N::::::N oo:::::::::::oo tt:::::::::::tt UU:::::::::UU s:::::::::::ss ee:::::::::::::e
* DDDDDDDDDDDDD ooooooooooo NNNNNNNN NNNNNNN ooooooooooo ttttttttttt UUUUUUUUU sssssssssss eeeeeeeeeeeeee
*/
/**
* ========================================================
* Navigation Timing API
* ========================================================
* The Navigation Timing API offers an extensive collection of timing-related metrics for web page navigation.
* This API can be extremely beneficial for collecting precise and comprehensive performance data.
*/
/**
* ========================================================
* 1. Accessing Navigation Timing Object
* ========================================================
* Access the Navigation Timing API via the `performance.timing` object to get detailed metrics.
*/
const timing = performance.timing;
/**
* ========================================================
* 2. Measuring Time Intervals
* ========================================================
* Several properties on the `performance.timing` object provide high-resolution timestamps.
* These can be used to measure the duration of various navigation phases.
*/
const pageLoadTime = timing.loadEventEnd - timing.navigationStart; // Time taken for page to fully load
const dnsLookupTime = timing.domainLookupEnd - timing.domainLookupStart; // Time taken for DNS lookup
console.log(`Page Load Time: ${pageLoadTime}ms`);
console.log(`DNS Lookup Time: ${dnsLookupTime}ms`);
/**
* ========================================================
* 3. Calculating Time to First Byte (TTFB)
* ========================================================
* Time to First Byte (TTFB) measures the time duration from the moment the browser requests the page
* to the moment it receives the first byte from the server.
*/
const timeToFirstByte = timing.responseStart - timing.requestStart;
console.log(`Time to First Byte: ${timeToFirstByte}ms`);
/**
* ========================================================
* 4. Measuring Content Load Time
* ========================================================
* This measures the time it takes for the DOMContentLoaded event to fire,
* indicating that the DOM is fully loaded.
*/
const contentLoadTime = timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart;
console.log(`Content Load Time: ${contentLoadTime}ms`);
/**
* ========================================================
* Nuances and Advanced Techniques
* ========================================================
*/
/**
* 1. Navigational Types
* ----------------------
* You can identify the type of navigation that led to the loading of the current page.
* For example, if the page was reloaded, navigated forward, or navigated backward.
*/
const navigationType = performance.navigation.type;
if (navigationType === performance.navigation.TYPE_RELOAD) {
console.log("This page was reloaded.");
}
/**
* 2. Multiple Fetches
* -------------------
* If multiple fetches or redirects are involved in loading a page, this should be considered
* when calculating performance metrics.
*/
const fetchTime = timing.fetchStart - timing.navigationStart;
console.log(`Fetch Time: ${fetchTime}ms`);
/**
* 3. Page Redirects
* -----------------
* This is important if you need to account for time spent in redirects.
*/
if (timing.redirectEnd - timing.redirectStart > 0) {
console.log("This page was redirected.");
}
/**
* 4. Server Time
* --------------
* This is the time spent on the server generating the page.
*/
const serverTime = timing.responseEnd - timing.responseStart;
console.log(`Server Time: ${serverTime}ms`);
/**
* 5. Using PerformanceNavigationTiming API
* ----------------------------------------
* A newer and more detailed interface for accessing navigation timing metrics.
* It can provide additional metrics not found in the `performance.timing` object.
*/
const [navigationEntry] = performance.getEntriesByType("navigation");
if (navigationEntry) {
console.log(`Server Timing: ${navigationEntry.serverTiming}`);
}