-
Notifications
You must be signed in to change notification settings - Fork 38
/
index.html
57 lines (54 loc) · 4.23 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Navigation Timing API</title>
<link href="http://fonts.googleapis.com/css?family=Copse|Artifika&subset=latin" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<h1>Breaking Down onLoad</h1>
<div id="bm" class="fig">
<a id="bookmarklet" href="javascript:(function()%20{if(!window.__profiler||window.__profiler.scriptLoaded!==true){var%20d=document,h=d.getElementsByTagName(%27head%27)[0],s=d.createElement(%27script%27),l=d.createElement(%27div%27),c=function(){if(l){d.body.removeChild(l);};window.__profiler=window.__profiler||new%20__Profiler();window.__profiler.init();__profiler.scriptLoaded=true;},t=new%20Date();s.type=%27text/javascript%27;l.style.cssText=%27z-index:999;position:fixed;top:10px;left:10px;display:inline;width:auto;font-size:14px;line-height:1.5em;font-family:Helvetica,Calibri,Arial,sans-serif;text-shadow:none;padding:3px%2010px%200;background:#FFFDF2;box-shadow:0%200%200%203px%20rgba(0,0,0,.25),0%200%205px%205px%20rgba(0,0,0,.25);%20border-radius:1px%27;l.innerHTML=%27Just%20a%20moment%27;s.src=%27//kaaes.github.io/timing/profiler.js%27;s.onload=c;s.onreadystatechange=function(){console.log(arguments);if(this.readyState==%27loaded%27){c()}};d.body.appendChild(l);h.appendChild(s);}%20else%20if(window.__profiler%20instanceof%20__Profiler){window.__profiler.init()}})();">Loadtime Breakdown</a>
<p>
drag the button to bookmarks toolbar<br /> ↓ <br />click it on any page you want to check
</p>
<p class="footnote">you may also click it first here to see what it does</p>
</div>
<p>This script uses <a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html">Navigation Timing object</a> to present timing of different phases of loading the page by a browser.</p>
<p>It measures everything from triggering the action (hitting enter on url bar, refreshing page or clicking a link/button) to the moment when site is fully loaded. Adding it to your bookmarks allows you to analyze performance of every request you'd like to check out.</p>
<p class="fig"><img id="chart" src="chart.png" alt="Sample chart generated by bookmarklet" /></p>
<p>So far Navigation Timing API works in Firefox 7+, Chrome (buggy in 15*) and IE 9+</p>
<p>* <tech blah>According to <a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html#sec-window.performance-attribute">W3C spec</a> <code>window.performance</code> should be implemented as <a href="http://www.w3.org/TR/WebIDL/#Replaceable">WebIDL [Replaceable] attribute</a>.</tech blah></p>
<p>
In human language it means that its properties are in fact not its own but its prototype.
So you can access the values with plain <code>performance.timing</code> but
using <code>Object</code> methods will not have the result you might expect. In Chrome however <code>performance</code> behaves like a 'normal' object:</p>
<pre>
performance.timing
// connectEnd: 1321394207437
// connectStart: 1321394207437
// domComplete: 1321394207768
// ...
// redirectEnd: 0
// redirectStart: 0
// ...
performance.hasOwnProperty("timing");
// should be false but true in Chrome
Object.getPrototypeOf(performance).hasOwnProperty("timing");
// should be true but false in Chrome
Object.keys(performance);
// should be [] but is ["memory", "timing", "navigation"] in Chrome
Object.keys(Object.getPrototypeOf(performance));
// should be ["timing", "navigation"] but is [] in Chrome
</pre>
<p>More resources:</p>
<ul>
<li><a href="http://www.html5rocks.com/en/tutorials/webperformance/basics/">HTML5 Rocks - Measuring Page Load Speed with Navigation Timing</a></li>
<li><a href="http://msdn.microsoft.com/en-us/library/ff975075">MSDN - performanceTiming Object</a></li>
<li><a href="info.html">My description of performance.timing properties based on all of the above</a></li>
</ul>
</div>
<a href="https://github.com/kaaes/timing"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
</body>
</html>