Skip to content

Instantly share code, notes, and snippets.

@mmocny

mmocny/element_timing_hud.js

Created December 11, 2024 14:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mmocny/3c47fcfb75c825d801516bd85faf7f29 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mmocny/3c47fcfb75c825d801516bd85faf7f29 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mmocny created this gist Dec 11, 2024.
    25 changes: 25 additions & 0 deletions element_timing_hud.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    <script>
    const observer = new PerformanceObserver(list => {
    for (let entry of list.getEntries()) {
    const size = entry.size || entry.intersectionRect.height * entry.intersectionRect.width;
    console.log(entry.entryType, size, entry.element, entry);
    if (entry.intersectionRect) showRect(entry.intersectionRect);
    }
    })
    observer.observe({ type: 'element', buffered: true });
    observer.observe({ type: 'largest-contentful-paint', buffered: true });

    // Thanks Philip Walton!
    function showRect(rect) {
    const box = document.createElement('div');
    box.setAttribute('style', Object.entries({
    position: 'absolute',
    outline: '1px solid red',
    left: `${rect.x}px`,
    top: `${rect.y}px`,
    width: `${rect.width}px`,
    height: `${rect.height}px`,
    }).map((e) => `${e[0]}:${e[1]}`).join(';'));
    document.body.appendChild(box);
    }
    </script>