Permalink
Browse files

more n' more fixes

  • Loading branch information...
1 parent b588db3 commit 9b0ccf94c07221b92d81a298bb4717e357ee8a4d @kaaes committed Nov 15, 2011
Showing with 20 additions and 21 deletions.
  1. BIN chart.png
  2. +14 −16 index.html
  3. +6 −5 style.css
View
BIN chart.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -8,45 +8,43 @@
<body>
<div id="main">
<h1>Breaking Down onLoad</h1>
- <div id="bm">
+ <div id="bm" class="fig">
<a id="bookmarklet" href="javascript:(function(){(function(){function%20u(){if(!window.performance){return}var%20b=window.performance,d=b.timing,e={},f=d.navigationStart||0,g=k(d),h=[];duration=0;g.forEach(function(a){if(d[a]%26%26d[a]%3E0){duration=d[a]-f;h.push([a,duration]);if(duration%3Ec){c=duration}}});h.sort(function(b,c){return%20b[1]!==c[1]%3Fb[1]-c[1]:a.indexOf(b[0])-a.indexOf(c[0])});h.forEach(function(a){e[a[0]]=a[1]});return%20h}function%20t(a,b,c,h){var%20j,k,m,n,o,p=h.color,q=h.sectionData[0],r=h.sectionData[1],s=h.label,t=b.getContext(%222d%22);if(a===%22block%22){j=h.eventData[0];k=h.eventData[1];n=j+%22-%22+k}else{j=h.eventData[0];n=j}n+=%22ms%22;o=t.measureText(n);if(o.width%3Ee){e=o.width+10;g=e+f;i=l(b)}return%20function(b){if(a===%22block%22){m=Math.round((k-j)*i);m=m===0%3F1:m}else{m=1}b.strokeStyle=%22rgba(%22+p[0]+%22,%22+p[1]+%22,%22+p[2]+%22,.3)%22;b.lineWidth=1;b.fillStyle=%22rgba(255,255,255,.99)%22;b.fillRect(0,0,c-g,d);b.fillStyle=%22rgba(%22+p[0]+%22,%22+p[1]+%22,%22+p[2]+%22,.1)%22;b.fillRect(0,0,c-g,d);b.strokeRect(.5,.5,Math.round(c-g-1),Math.round(d));b.shadowColor=%22white%22;b.fillStyle=%22rgba(%22+p[0]+%22,%22+p[1]+%22,%22+p[2]+%22,.3)%22;b.fillRect(Math.round(i*q),0,Math.round(i*(r-q)),d);b.fillStyle=%22rgb(%22+p[0]+%22,%22+p[1]+%22,%22+p[2]+%22)%22;b.fillRect(Math.round(i*j),0,m,d);b.fillText(n,c-g+10,2*d/3);b.fillText(s,c-g+e+10,2*d/3)}}function%20s(a,b,c,d,e,f){var%20g={color:f.color,sectionData:[f.barStart,f.barEnd],eventData:e.map(function(a){return%20b[a]%26%26typeof%20b[a].time!==%22undefined%22%3Fb[a].time:a}),label:f.label};return%20t(d,a,c,g)}function%20r(c){var%20d={},e,f,g,h,i,j,k,l;c.forEach(function(a){d[a[0]]={time:a[1]}});for(g=0,i=b.length;g%3Ci;g++){e=b[g].start;f=b[g].end;k=a.slice(e,f+1);l=k.filter(function(a){return%20d.hasOwnProperty(a)});l.sort(function(a,b){return%20d[a].time-d[b].time});e=l[0];f=l[l.length-1];for(h=0,j=l.length;h%3Cj;h++){var%20m=l[h];if(d[m]){d[m].color=b[g].color;d[m].barStart=d[e].time;d[m].barEnd=d[f].time}}}return%20d}function%20q(b,c){var%20e,f,g,j,k,m,n=[],p=[],q,t=%2212px%20Arial%22,u,v,w=document.createElement(%22div%22),x=o(),y=r(c);u=document.createElement(%22canvas%22);u.width=parseInt(window.getComputedStyle(b).width,10)-20;v=u.getContext(%222d%22);v.font=t;i=l(u);q=s.bind(this,u,y,u.width);for(var%20z%20in%20y){j=y[z];f=z.indexOf(%22Start%22);g=-1;if(f%3E-1){k=z.substr(0,f);g=a.indexOf(k+%22End%22)}if(f%3E-1%26%26g%3E-1){j.label=k;p.push(q(%22block%22,[k+%22Start%22,k+%22End%22,k],j));n.push(k+%22End%22)}else%20if(n.indexOf(z)%3C0){j.label=z;p.push(q(%22point%22,[z],j))}}u.height=h*d*p.length;v.font=t;p.forEach(function(a){a(v);v.translate(0,Math.round(d*h))});w.appendChild(u);w.appendChild(x);return%20w}function%20p(){var%20a=document.createElement(%22p%22);a.innerHTML=%22Navigation%20Timing%20API%20is%20not%20supported%20by%20your%20browser%22;return%20a}function%20o(){var%20a=document.createElement(%22a%22);a.target=%22_blank%22;a.href=%22http://kaaes.github.com/timing/info.html%22;a.innerHTML=%22What%20does%20it%20all%20mean%3F%22;a.style.cssText=%22color:%231D85B8%22;return%20a}function%20n(a){var%20b=document.createElement(%22div%22),c=document.createElement(%22h1%22),d=document.createElement(%22button%22);c.innerHTML=%22Page%20Load%20Time%20Breakdown%22;c.style.cssText=%22font-family:Helvetica,Calibri,Arial,sans-serif;text-shadow:none;display:inline-block;color:%23222;font-weight:normal;font-size:24px;margin:10px%200%22;d.innerHTML=%22close%22;d.style.cssText=%22font-family:Helvetica,Calibri,Arial,sans-serif;text-shadow:none;float:right;border:none;background:%23333;color:%23fff;border-radius:10px;padding:3px%2010px;font-size:12px;%22;d.addEventListener(%22click%22,function(b){a.parentNode.removeChild(a)});b.appendChild(c);b.appendChild(d);return%20b}function%20m(){var%20a=document.createElement(%22div%22);document.body.appendChild(a);a.style.cssText=%22font-size:14px;font-family:Helvetica,Calibri,Arial,sans-serif;text-shadow:none;text-align:left;width:95%25;position:fixed;z-index:999;margin:0%20auto;top:20px;left:20px;background:rgba(255,253,242,.95);padding:10px;box-shadow:0%200%2010px%205px%20rgba(0,0,0,.5),0%200%200%2010px%20rgba(0,0,0,.5);%20border-radius:1px%22;return%20a}function%20l(a){return(a.width-g)/c}function%20k(a){var%20b=Object.keys(a);return%20b.length%3Fb:Object.keys(Object.getPrototypeOf(a))}var%20a=[%22navigationStart%22,%22redirectStart%22,%22redirectStart%22,%22redirectEnd%22,%22fetchStart%22,%22domainLookupStart%22,%22domainLookupEnd%22,%22connectStart%22,%22secureConnectionStart%22,%22connectEnd%22,%22requestStart%22,%22responseStart%22,%22responseEnd%22,%22unloadEventStart%22,%22unloadEventEnd%22,%22domLoading%22,%22domInteractive%22,%22domContentLoadedEventStart%22,%22domContentLoadedEventEnd%22,%22domContentLoaded%22,%22domComplete%22,%22loadEventStart%22,%22loadEventEnd%22];var%20b=[{name:%22network%22,color:[224,84,63],start:a.indexOf(%22navigationStart%22),end:a.indexOf(%22connectEnd%22)},{name:%22server%22,color:[255,188,0],start:a.indexOf(%22requestStart%22),end:a.indexOf(%22responseEnd%22)},{name:%22browser%22,color:[16,173,171],start:a.indexOf(%22unloadEventStart%22),end:a.indexOf(%22loadEventEnd%22)}];var%20c=0,d=20,e=50,f=150,g=e+f,h=1.25,i=1,j={};(function%20v(){var%20a=m(),b=u();a.appendChild(n(a));a.appendChild(b%3Fq(a,b):p())})()})()})();">Loadtime Breakdown</a>
<p>
drag the button to bookmarks toolbar<br /> &darr; <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 id="example"><img src="chart.png" alt="Sample chart generated by bookmarklet" /></p>
- <p>So far Navigation Timing API works in Firefox 7+, Chrome (buggy*) and IE 9+</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 (as for 15, it's buggy*) and IE 9+</p>
<p>* &lt;tech blah&gt;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>.&lt;/tech blah&gt;</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:</p>
<pre>
performance.timing
-// connectEnd: 1321394207437
-// connectStart: 1321394207437
-// domComplete: 1321394207768
-// ...
-// redirectEnd: 0
-// redirectStart: 0
-// ...
+ // connectEnd: 1321394207437
+ // connectStart: 1321394207437
+ // domComplete: 1321394207768
+ // ...
+ // redirectEnd: 0
+ // redirectStart: 0
+ // ...
performance.hasOwnProperty("timing");
-// false
+ // should be false but true in Chrome
Object.getPrototypeOf(performance).hasOwnProperty("timing");
-// true
+ // should be true but false in Chrome
Object.keys(performance);
-// []
+ // should be [] but is ["memory", "timing", "navigation"] in Chrome
Object.keys(Object.getPrototypeOf(performance));
-// ["timing", "navigation"]
+ // should be ["timing", "navigation"] but is [] in Chrome
</pre>
-<p>In Chrome however <code>performance</code> is treated like a 'normal' object, so properties are its own.</p>
<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>
View
@@ -33,11 +33,11 @@ pre {
box-shadow: 0 0 0 1px rgba(243,218,178,.3), 0 0 0 3px rgba(0,0,0,.8), 0 0 1px 4px rgba(255,255,255,.2), 0 0 1px 5px rgba(0,0,0,.2);
}
-dl, #bm, #example {
+dl, .fig {
background: rgba(255,255,255,.5);
box-shadow: 0 0 1px rgba(0,0,0,.2);
padding: 1em;
- margin: 1em;
+ margin: 1em 0;
}
dd {
@@ -63,16 +63,17 @@ dd {
.footnote {
font-size: .7em;
}
-#bm, #example {
+.fig {
text-align: center;
}
#bm p {
margin: 1em 0;
line-height: 1.1em;
}
-#example img {
+#chart {
display: block;
- padding: .5em 1.5em;
+ margin: 0 auto;
background:rgba(255,253,242,.95);
box-shadow: 0 0 1px rgba(0,0,0,.1);
+ max-width: 100%;
}

0 comments on commit 9b0ccf9

Please sign in to comment.