Permalink
Browse files

create gh-pages

  • Loading branch information...
kaaes committed Nov 7, 2011
1 parent ac2ff69 commit b4b30270f9df099003723efc952345280a180182
Showing with 426 additions and 0 deletions.
  1. +265 −0 bookmarklet.js
  2. BIN grunge2.jpg
  3. +18 −0 index.html
  4. +78 −0 info.html
  5. +65 −0 style.css
View
@@ -0,0 +1,265 @@
+(function() {
+ var order = ['navigationStart', 'redirectStart', 'redirectStart', 'redirectEnd', 'fetchStart', 'domainLookupStart', 'domainLookupEnd', 'connectStart', 'secureConnectionStart', 'connectEnd', 'requestStart', 'responseStart', 'responseEnd', 'unloadEventStart', 'unloadEventEnd', 'domLoading', 'domInteractive', 'domContentLoadedEventStart', 'domContentLoadedEventEnd', 'domContentLoaded', 'domComplete', 'loadEventStart', 'loadEventEnd'];
+ var sections = [{
+ name: 'network',
+ color: [224, 84, 63],
+ start: order.indexOf('navigationStart'),
+ end: order.indexOf('connectEnd')
+ }, {
+ name: 'server',
+ color: [255, 188, 0],
+ start: order.indexOf('requestStart'),
+ end: order.indexOf('responseEnd')
+ }, {
+ name: 'browser',
+ color: [16, 173, 171],
+ start: order.indexOf('unloadEventStart'),
+ end: order.indexOf('loadEventEnd')
+ }];
+
+ var maxTime = 0,
+ barHeight = 20,
+ timeLabelWidth = 50,
+ nameLabelWidth = 150,
+ textSpace = timeLabelWidth + nameLabelWidth,
+ spacing = 1.25,
+ unit = 1,
+ times = {};
+
+ function getPerfObjKeys(obj) {
+ var keys = Object.keys(obj);
+ return keys.length ? keys : Object.keys(Object.getPrototypeOf(obj));
+ }
+
+ function setUnit(canvas) {
+ return (canvas.width - textSpace) / maxTime;
+ }
+
+ function createContainer() {
+ var container = document.createElement('div');
+ document.body.appendChild(container);
+ container.style.cssText = 'font-size:14px;font-family:Helvetica,Calibri,Arial,sans-serif;text-shadow:none;text-align:left;width:95%;position:fixed;z-index:999;margin:0 auto;top:20px;left:20px;background:rgba(255,253,242,.95);padding:10px;box-shadow:0 0 10px 5px rgba(0,0,0,.5),0 0 0 10px rgba(0,0,0,.5); border-radius:1px';
+ return container;
+ }
+
+ function createHeader(container) {
+ var c = document.createElement('div'),
+ h = document.createElement('h1'),
+ b = document.createElement('button');
+
+ h.innerHTML = 'Page Load Time Breakdown';
+ h.style.cssText = 'font-family:Helvetica,Calibri,Arial,sans-serif;text-shadow:none;display:inline-block;color:#222;font-weight:normal;font-size:24px;margin:10px 0';
+
+ b.innerHTML = 'close';
+ b.style.cssText = 'font-family:Helvetica,Calibri,Arial,sans-serif;text-shadow:none;float:right;border:none;background:#333;color:#fff;border-radius:10px;padding:3px 10px;font-size:12px;';
+ b.addEventListener('click', function(e){container.parentNode.removeChild(container)});
+
+ c.appendChild(h);
+ c.appendChild(b);
+
+ return c;
+ }
+
+ function createInfoLink() {
+ var a = document.createElement('a');
+ a.href = 'http://msdn.microsoft.com/en-us/library/ff975075';
+ a.innerHTML = 'What does it all mean?';
+ a.style.cssText = 'color:#1D85B8'
+ return a;
+ }
+
+ function notSupportedInfo() {
+ var p = document.createElement('p');
+ p.innerHTML = 'Navigation Timing API is not supported by your browser';
+ return p;
+ }
+
+ function createChart(container, data) {
+ var time, blockStart, blockEnd, item, eventName, options,
+ omit = [], drawFns = [], preDraw,
+ fontString = "12px Arial",
+ canvas, context,
+ canvasCont = document.createElement('div'),
+ infoLink = createInfoLink(),
+ dataObj = findSectionEdges(data);
+
+ canvas = document.createElement('canvas');
+ canvas.width = parseInt(window.getComputedStyle(container).width, 10) - 20;
+ context = canvas.getContext('2d');
+ context.font = fontString; // needs to be set here for proper text measurement...
+
+ unit = setUnit(canvas);
+
+ preDraw = prepareDraw.bind(this, canvas, dataObj, canvas.width);
+
+ for (var name in dataObj) {
+ item = dataObj[name];
+ blockStart = name.indexOf('Start');
+ blockEnd = -1;
+ if (blockStart > -1) {
+ eventName = name.substr(0, blockStart);
+ blockEnd = order.indexOf(eventName + 'End');
+ }
+ if (blockStart > -1 && blockEnd > -1) {
+ item.label = eventName;
+ drawFns.push(preDraw('block', [eventName + 'Start', eventName + 'End', eventName], item));
+ omit.push(eventName + 'End');
+ }
+ else if (omit.indexOf(name) < 0) {
+ item.label = name;
+ drawFns.push(preDraw('point', [name], item));
+ }
+ }
+
+ canvas.height = spacing * barHeight * drawFns.length;
+ context.font = fontString; // setting canvas height resets font, has to be re-set
+
+ drawFns.forEach(function(draw) {
+ draw(context);
+ context.translate(0, Math.round(barHeight * spacing));
+ })
+
+ canvasCont.appendChild(canvas);
+ canvasCont.appendChild(infoLink);
+
+ return canvasCont;
+ }
+
+ function findSectionEdges(dataArr) {
+ var data = {}, start, end, i, j, len, flen, sectionOrder, filtered;
+ dataArr.forEach(function(el) {
+ data[el[0]] = { time : el[1] };
+ });
+ for (i = 0, len = sections.length; i < len; i++) {
+ start = sections[i].start;
+ end = sections[i].end;
+
+ sectionOrder = order.slice(start, end + 1);
+ filtered = sectionOrder.filter(function(el){
+ return data.hasOwnProperty(el);
+ });
+ filtered.sort(function(a, b){
+ return data[a].time - data[b].time;
+ })
+ start = filtered[0];
+ end = filtered[filtered.length-1];
+
+ for(j = 0, flen = filtered.length; j < flen; j++) {
+ var item = filtered[j];
+ if(data[item]) {
+ data[item].color = sections[i].color;
+ data[item].barStart = data[start].time;
+ data[item].barEnd = data[end].time;
+ }
+ }
+ }
+ return data;
+ }
+
+ function prepareDraw(canvas, data, barWidth, mode, eventName, options) {
+ var opts = {
+ color : options.color,
+ sectionData : [options.barStart, options.barEnd],
+ eventData : eventName.map(function(el){ return data[el] && typeof data[el].time !== 'undefined' ? data[el].time : el; }),
+ label : options.label
+ }
+ return drawBar(mode, canvas, barWidth, opts);
+ }
+
+ function drawBar(mode, canvas, barWidth, options) {
+ var start, stop, width, timeLabel, metrics,
+ color = options.color,
+ sectionStart = options.sectionData[0],
+ sectionStop = options.sectionData[1],
+ nameLabel = options.label,
+ context = canvas.getContext('2d');
+
+ if (mode === 'block') {
+ start = options.eventData[0];
+ stop = options.eventData[1];
+ timeLabel = start + '-' + stop;
+ } else {
+ start = options.eventData[0];
+ timeLabel = start;
+ }
+ timeLabel += 'ms';
+
+ metrics = context.measureText(timeLabel);
+ if(metrics.width > timeLabelWidth) {
+ timeLabelWidth = metrics.width + 10;
+ textSpace = timeLabelWidth + nameLabelWidth;
+ unit = setUnit(canvas);
+ }
+
+ return function(context) {
+ if(mode === 'block') {
+ width = Math.round((stop - start) * unit);
+ width = width === 0 ? 1 : width;
+ } else {
+ width = 1;
+ }
+
+ // row background
+ context.strokeStyle = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',.3)';
+ context.lineWidth = 1;
+ context.fillStyle = 'rgba(255,255,255,.99)';
+ context.fillRect(0, 0, barWidth - textSpace, barHeight);
+ context.fillStyle = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',.1)';
+ context.fillRect(0, 0, barWidth - textSpace, barHeight);
+ context.strokeRect(.5, .5, Math.round(barWidth - textSpace -1), Math.round(barHeight));
+
+ // section bar
+ context.shadowColor = 'white';
+ context.fillStyle = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',.3)';
+ context.fillRect(Math.round(unit * sectionStart), 0, Math.round(unit * (sectionStop - sectionStart)), barHeight);
+
+ // event marker
+ context.fillStyle = 'rgb(' + color[0] + ',' + color[1] + ',' + color[2] + ')';
+ context.fillRect(Math.round(unit * start), 0, width, barHeight);
+
+ // label
+ context.fillText(timeLabel, barWidth - textSpace + 10, 2 * barHeight / 3);
+ context.fillText(nameLabel, barWidth - textSpace + timeLabelWidth + 10, 2 * barHeight / 3);
+ }
+ }
+
+ function getData() {
+ if (!window.performance) {
+ return;
+ }
+ var data = window.performance,
+ timeData = data.timing,
+ times = {},
+ start = timeData.navigationStart || 0,
+ events = getPerfObjKeys(timeData),
+ sortable = [];
+ duration = 0;
+
+ events.forEach(function(e) {
+ if (timeData[e] && timeData[e] > 0) {
+ duration = timeData[e] - start;
+ sortable.push([e, duration]);
+ if (duration > maxTime) {
+ maxTime = duration;
+ }
+ }
+ });
+
+ sortable.sort(function(a, b) {
+ return a[1] !== b[1] ? a[1] - b[1] : order.indexOf(a[0]) - order.indexOf(b[0]);
+ });
+
+ sortable.forEach(function(el) {
+ times[el[0]] = el[1];
+ });
+
+ return sortable;
+ }
+
+ (function show() {
+ var container = createContainer(),
+ data = getData();
+ container.appendChild(createHeader(container));
+ container.appendChild(data ? createChart(container, data) : notSupportedInfo());
+ })();
+})();
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,18 @@
+<!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>
+ <p></p>
+ <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.href=%22http://msdn.microsoft.com/en-us/library/ff975075%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)*</p>
+ <p class="footnote">* you may also click it first to see what it does ;)</p>
+ </div>
+ </body>
+ <!-- <script src='bookmarklet.js'></script>-->
+</html>
Oops, something went wrong.

0 comments on commit b4b3027

Please sign in to comment.