ResourcesTimeline
Drag this button to your bookmarks bar:
ResourcesTimelineClick it anywhere to get the resources timeline right on the page! Or click it now, and see how it works.
This script uses Resource Timing API to get all the scripts, stylesheets, images, etc. requested by the page. Then all of that is represented in a timeline similar to the one you should know from the network panel in Chrome Dev Tools.
Tested on:
- Chrome 36
- Opera 23
- Internet Explorer 11
Learn more:
If you like it or want to share some thoughts, feel free to catch me on twitter: @slawekkolodziej
{function t(e,i,n){if('object'!=typeof i)e.setAttribute(i,n);else for(var r in i)i.hasOwnProperty(r)&&t(e,r,i[r])}function e(t){return document.createElementNS(o,t)}function i(t){return'number'==typeof t}function n(i){this.container=e('svg'),this.margin=[0,0,0,0],this.markSpacing=0,t(this.container,'xmlns','http://www.w3.org/2000/svg'),this.container.setAttributeNS(o,'xlink','http://www.w3.org/1999/xlink'),i=i||document.body,i.appendChild(this.container)}function r(){var t=document.createElement('div');return t.style.cssText='position: fixed; overflow: auto; top: 0; left: 0; background: #fff; font-family: Helvetica; padding: 0.5em; z-index:9999999; border-width: 0 2px 2px 0; border-style: solid; border-color: #999; max-height: 100%;',document.body.appendChild(t),t}function a(t){var e='border: 1px solid #ddd; background: #fff; text-decoration: none; color: #000; font-size: 0.8em; vertical-align: middle; cursor: pointer; padding: 0.2em 0.5em; display: inline-block; margin: 0.1em;',i=document.createElement('div'),n=document.createElement('a'),r=document.createElement('a'),a=t.innerHTML;i.style.cssText='position: absolute; top: 0.5em; right: 0.5em;',n.textContent='save',n.style.cssText=e,n.href='data:image/svg+xml,'+a,n.download='Resources loading timeline.svg',i.appendChild(n),r.textContent='close',r.style.cssText=e,r.addEventListener('click',function(e){t.parentNode.removeChild(t),e.preventDefault()}),i.appendChild(r),t.appendChild(i)}function s(t){t.innerHTML='<span>This browser doesn\'t support Resource Timing API :(</span>'}var o='http://www.w3.org/2000/svg',h=function(){var t=document.createElement('a'),e=/^\/[^\/]+$/;return function(i){t.href=i;var n=t.pathname;return'/'===n?t.hostname:e.test(n)?n.slice(1):(n=n.split('/'),n[n.length-1])}}();return n.prototype={padding:.1,style:{column:{fill:'#B891DB',rx:8},label:{dy:'0.5ex','font-size':14,'font-family':'Helvetica'},markLabel:{dy:'1.5ex','text-anchor':'end','font-size':12}},setSize:function(e,i,n,r){this.box={width:n,height:r,x:e,y:i},t(this.container,{viewBox:[e,i,n,r].join(' '),width:n,height:r})},setMargin:function(t,e,i,n){this.margin=[t,e,i,n]},updatePlotBox:function(){this.plotBox={width:this.box.width-(this.margin[1]+this.margin[3]),height:this.box.height-(this.margin[0]+this.margin[2]),x:this.margin[3],y:this.margin[0]}},updateScale:function(){this.updatePlotBox(),this.scaleY=this.plotBox.width/this.extremes[1],this.scaleX=this.plotBox.height/this.data.length},setData:function(t){this.data=t,this.extremes=[];var e=t.reduce(this.getExtremes);this.extremes[0]=i(this.min)&&this.min<e[0]?this.min:e[0],this.extremes[1]=i(this.max)&&this.max>e[1]?this.max:e[1],this.extremes[1]=100*Math.ceil(this.extremes[1]/100),this.updateScale()},getExtremes:function(t,e,i){var n=e[0].concat(1===i?t[0]:t),r=Math.max.apply(null,n),a=Math.min.apply(null,n);return[a,r]},setExtremes:function(t,e){i(t)&&(this.min=t),i(e)&&(this.max=e)},getTextBBox:function(i){return this._textHelper||(this._textHelper=e('text'),this.container.appendChild(this._textHelper),t(this._textHelper,{opacity:0})),this._textHelper.textContent=i,this._textHelper.getBBox()},cleanUp:function(){this._textHelper&&this.container.removeChild(this._textHelper)},render:function(){var i=e('g'),n=document.createDocumentFragment(),r=this.plotBox.width;t(i,'transform','translate('+this.plotBox.x+','+this.plotBox.y+')'),this.data.forEach(function(e,i){var a,s=e[1].duration.toFixed(2)+'ms',o=this.scaleY*e[0][0]+5,h=this.scaleX*(i+.5);n.appendChild(this.renderColumn(e[0],i)),a=this.renderLabel(o,h,s),r<o+this.getTextBBox(s).width&&t(a,{'text-anchor':'end',x:o-10}),n.appendChild(a)},this),i.appendChild(n),this.container.appendChild(i)},renderColumn:function(i,n){var r=e('g'),a=e('rect'),s=e('rect');return t(a,this.style.column),t(a,{fill:'#E0CEF0',x:this.scaleY*i[0],y:this.scaleX*(n+this.padding),width:this.scaleY*(i[2]-i[0]),height:this.scaleX*(1-2*this.padding)}),t(s,this.style.column),t(s,{x:this.scaleY*i[1],y:this.scaleX*(n+this.padding),width:this.scaleY*(i[2]-i[1]),height:this.scaleX*(1-2*this.padding)}),r.appendChild(a),r.appendChild(s),r},renderLabels:function(i){var n,r=e('g'),a=document.createDocumentFragment(),s=this.margin[3],o=this.margin[0];i.forEach(function(t,e){var i=this.scaleX*(e+.5)+o;a.appendChild(this.renderLabel(0,i,t.slice(0,20)))},this),t(r,'transform','translate('+s+',0)'),r.appendChild(a),this.container.appendChild(r),n=r.getBBox(),this.margin[3]=s+n.width+10},renderLabel:function(i,n,r){var a=e('text');return t(a,{x:i,y:n}),t(a,this.style.label),a.textContent=r,a},renderHeader:function(){var i=e('text');t(i,{x:10,y:25,'font-size':20,'font-family':'Helvetica'}),i.textContent='Resources loading timeline',this.container.appendChild(i)},renderMark:function(i,n,r){var a=e('path'),s=this.margin,o=s[3]+i*this.scaleY,h=s[0]+this.plotBox.height;t(a,{d:['M',o,s[0],'V',h+this.markSpacing+15].join(' '),'stroke-width':2,stroke:r}),this.container.appendChild(a);var d=this.renderLabel(o-5,h+2+this.markSpacing,n);t(d,this.style.markLabel),this.container.appendChild(d),this.markSpacing+=15},renderStripes:function(){var i,n,r=document.createDocumentFragment(),a=this.box.width,s=this.scaleX,o=this.margin[0],h=this.data.length;for(n=0;h>n;n+=2)i=e('rect'),t(i,{x:0,y:o+this.scaleX*n,width:a,height:s,fill:'#eee'}),r.appendChild(i);this.container.insertBefore(r,this.container.firstChild)}},window.__resourcesTimeline=function(){var t=window.performance,e=t&&t.getEntriesByType&&t.getEntriesByType('resource'),i=r();if(!e)return s(i);var o=t.timing,d=o.navigationStart,l=o.domInteractive-d,c=o.loadEventStart-d,p=e.map(function(t){return[[t.startTime,t.responseStart||t.startTime,t.responseEnd],t]});p.unshift([[0,o.responseStart-d,o.domLoading-d],{duration:o.domLoading-d,initiatorType:'other',name:'document'}]);var m=p.map(function(t){return h(t[1].name)}),u=p.map(function(t){return t[1].initiatorType}),x=new n(i);x.setExtremes(0,o.loadEventEnd-o.navigationStart),x.setSize(0,0,800,22*p.length+80),x.setMargin(35,10,50,10),x.setData(p),x.renderHeader(),x.renderLabels(m),x.renderLabels(u),x.updateScale(),x.render(),x.renderMark(0,'Navigation start: 0ms','rgba(0,255,0,0.7)'),x.renderMark(l,'DOM Complete: '+l+'ms','rgba(0,0,255,0.7)'),x.renderMark(c,'Loaded: '+c+'ms','rgba(255,0,0,0.7)'),x.renderStripes(),x.cleanUp(),a(i)},window.__resourcesTimeline}(),window.__resourcesTimeline();){kind=link}