performance-api-paint.js

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);
});