Awesome

Waterfall

A bookmarklet to create page load waterfall in the browser using the Resource Timing API

Just add the bookmarklet below to your bookmarks bar.

javascript:(function(){var el=document.createElement('script');el.type='text/javascript';el.src='//andydavies.github.io/waterfall/bookmarklet/waterfall.js';document.getElementsByTagName('body')[0].appendChild(el);})();

Works In*

IE 10, Chromium Nightly

*When I say 'works in' I mean you'll get a waterfall but sometimes there will be odd things about it!

To Do

• Add DOM event markers e.g. onload etc.
• Add AppCache, fix TCP times
• Truncate URL display
• Remove protocol from URL display
• Fix blocked timings
• Display blocked / active times for 3rd party resources
• Check if bookmarklet script loaded before adding it
• Add iframe support
• Add tooltip with full URL and timing details
• Add row number?
• Add legend
• Cleanup and refactor drawing code
• Add Close button
• Add Jdrop / HAR Storage links
• Flexible width

To check

• Why is the API sometimes unavailable in IE10?
• "about:blank" in IE10 on http://t.uk.msn.com/ - valid

Browser Issues

Here are the issues and queries found so far with the browser implementations of Resource Timing - no CORS testing so far.

(Convert these to GH issues???)

Chromium

All of these issues are already marked as fixed on crbug.com but waterfall code hasn't been tested against a recent build.

• Unexpected connectStart and connectEnd values for connections that are currently open
• Entries include dataURIs
• Cross Origin resources have responseEnd of 0
• List of entries excludes resources retrieved from cache
• fetchStart times always equal startTime

IE10

(no link to issue tracker for these)

• Resource Timing is only available in IE9/IE10 document modes but during testing API wasn't present for some sites where it previously worked and a restart seemed to fix it. This needs re-checking to ensure it wasn't my error.
• connectStart == connectEnd for both Navigation and Resource Timing entries - would expect different values for early page requests where new TCP connections would be opened.
• Frequently domainLookupStart == domainLookupEnd even for domains the Windows VM has never seen previously.
• responseStart == responseEnd in Navigation Timing for both first and repeat views even when waterfall in dev tools shows a response

Change Log

2013-01-01 Add JSDoc comments, start re-factoring drawing code