Skip to content

Instantly share code, notes, and snippets.

@song940
Last active June 9, 2020 06:10
Show Gist options
  • Save song940/c88666fdc8ceedc251c6d3dbbd7b69ab to your computer and use it in GitHub Desktop.
Save song940/c88666fdc8ceedc251c6d3dbbd7b69ab to your computer and use it in GitHub Desktop.
const getRandomColor = () =>
'#' + parseInt(Math.random() * 0xffffff).toString(16);
const px = size => `${size}px`;
const timings = performance
.getEntries()
.filter(timing => timing.initiatorType === 'img')
.reduce((images, img) => {
images[img.name] = img;
return images;
}, {});
document.querySelectorAll('*').forEach(e => {
const rect = e.getBoundingClientRect();
const layer = document.createElement('div');
with (layer.style) {
top = px(rect.y);
left = px(rect.x);
width = px(rect.width);
height = px(rect.height);
position = 'absolute';
borderWidth = px(1);
borderStyle = 'solid';
borderColor = getRandomColor();
}
let timing;
if (e.nodeName === 'IMG' && (timing = timings[e.src])) {
const badge = document.createElement('span');
badge.textContent = (timing.duration | 0) + 'ms';
with (badge.style) {
top = px(0);
right = px(0);
color = 'red';
fontSize = px(10);
position = 'absolute';
backgroundColor = 'rgba(50,150,150,.7)';
}
layer.appendChild(badge);
}
document.body.appendChild(layer);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment