JSFiddle - React, Tailwind, and code Playground

by bcaudan

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <script>
      window.longTasks = []

      const observer = new PerformanceObserver(function(list) {
        for (const entry of list.getEntries()) {
          storeLongTask(entry)
        }
      })

      observer.observe({
        type: 'longtask'
      })

      function storeLongTask(entry) {
        longTasks.push({
          start: parseInt(entry.startTime),
          duration: parseInt(entry.duration),
          name: entry.name,
          container: {
            type: entry.attribution[0].containerType,
            id: entry.attribution[0].containerId || undefined,
            name: entry.attribution[0].containerName || undefined,
            src: entry.attribution[0].containerSrc || undefined,
          },
        })
      }

      function generateLongTask(duration) {
        const origin = new Date().getTime()
        while (new Date().getTime() < origin + duration) {}
      }

      generateLongTask(400)

    </script>
    <meta charset="UTF-8" />
    <title>empty page</title>
  </head>

  <body>
    <fieldset>
      <name>current document</name>
      <p>400 ms long task</p>
    </fieldset>
    <fieldset>
      <name>same domain iframe</name>
      <iframe id="same" height="50px" src="//fiddle.jshell.net/bcaudan/x025ch9a/4/show/light/" frameborder="0" sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups" allow="midi; geolocation; microphone; camera; encrypted-media;"></iframe>
    </fieldset>
     <fieldset>
      <name>same domain sandboxed iframe</name>
      <iframe id="sandbox" height="50px" src="//fiddle.jshell.net/bcaudan/0eszaoxm/1/show/light/" frameborder="0" sandbox="allow-forms allow-scripts allow-modals allow-popups" allow="midi; geolocation; microphone; camera; encrypted-media;"></iframe>
    </fieldset>
    <fieldset>
      <name>other domain iframe</name>
      <iframe src="https://codepen.io/bcaudan/full/LYEdKwg" frameborder="0"></iframe>
    </fieldset>
   ...