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);})();
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!
- 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
- Why is the API sometimes unavailable in IE10?
- "about:blank" in IE10 on http://t.uk.msn.com/ - valid
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???)
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
(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
2013-01-01 Add JSDoc comments, start re-factoring drawing code