zeman / perfmap Goto Github PK
View Code? Open in Web Editor NEWFront-end performance heatmap bookmarklet.
Front-end performance heatmap bookmarklet.
Duration from resource timing includes blocking time if multiple images from same domain.
Remove duration?
can you please add bower support ๐
Should be able to use logic similar to the RUM Speed Index code: https://github.com/WPO-Foundation/RUM-SpeedIndex/blob/master/src/rum-speedindex.js#L86
If the bookmarklet is run against the same site multiple times, the overlays stack on top of themselves and get darker (maybe it's a feature).
hi there,
I like this tool very much,and it's really awesome.
But I only show the bookmarks bar in a new tab.
So,I just convert it to a Chrome extension.
If you like it, you can just recommend it.
Thank you.
Nice work, however not license is specified.
Could you add a license to the repo? it may help to know what we can and cannot do with the source.
Thanks so much.
Hi!
Are you aware that your bookmarklet doesn't work with CSP implemented?
Ask if you need some help on that...
When hovering over the legend hide the page timings and show the time range for each step in the heatmap.
For pages with background images, the huge overlay obscures most of the page content overlays (twitter's stream for example).
Detecting overlaps would also work but would be harder.
Hi, I'd like some pointers to try to run perfmap on phantomjs/casperjs to store a screenshot of the test. I did some testing following my experience on phantomjs but it seems that just injecting the element wont work:
I get this error when I try to use PerfMap in Firefox 33:
TypeError: performance.getEntriesByName is not a function
https://zeman.github.io/perfmap/perfmap.js
Line 36
I can't reproduce in Chrome.
I'm getting First Paint NaNms in Safari on Yosemite.
Running the snippet against www.aol.com for example results in a mess of rectangles because it includes a bunch of content that is not visible.
There should be an option to close the Perfmap
Red is used for early loading images and it transitions to green for late-loading. Red usually implies "bad" so it feels like the colors are in the opposite order from what they should be.
Add a padding-bottom: 25px;
to the parent element of perfmap to show hidden elements.
On Chrome version 38.0.2125.101, Running the code throws this error:
Refused to load the script 'https://zeman.github.io/perfmap/perfmap.js' because it violates the following Content Security Policy directive: "script-src assets-cdn.github.com collector-cdn.github.com".
couldn't find a handy fixed position image so i tested it on bootstrap fixed navbar: http://getbootstrap.com/examples/navbar-fixed-top/
Paste the following code in the console.
var $el = document.querySelectorAll('.navbar-fixed-top');
var template = '<div class="perfmap" data-ms="1808" style="position: absolute; box-sizing: border-box; color: rgb(255, 255, 255); padding-left: 10px; padding-right: 10px; line-height: 14px; font-size: 26px; font-weight: 800; font-family: Helvetica Neue, sans-serif; text-align: center; opacity: 0.95; top: 0; left: 0; width: 100%; height: 100%; padding-top: 25%; z-index: 4000; background: rgb(215, 48, 39);">1808ms (12ms)</div>';
function elementIsFixed(element) {
var $element = $(element);
var isFixed = false;
if ($element.css("position") == "fixed") {
isFixed = true;
}
return isFixed;
}
for (var i = 0; i < $el.length; i++) {
var $elIsFixed = elementIsFixed($el[i]);
if ($elIsFixed == true) {
var eleHeight = $($el[i]).outerHeight();
var paddTop = (eleHeight - 14) / 2;
template = $(template).css({
"position": "fixed",
"height": eleHeight,
"padding-top": paddTop
});
$($el[i]).before(template);
}
}
It would be great if you could describe in the readme with 2-3 sentences why there is this difference between the 2 timings one sees for each resource, so people get the point more clearly what those numbers are about.
a few examples of why those differences exist would be awesome.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.