<div>
    <button onclick="markDone()">Done</button>
    <button class="red" onclick="disconnect()">Disconnect</button>
  </div>
  <img src="https://i.pinimg.com/originals/ce/69/4f/ce694f560636dffcf42ecf40d4f2f962.gif">

body{
      padding: 20px; 
      display: flex;
      flex-direction: column;
    }
    button {
      font-size: 16px;
      margin: 10px 20px;
      padding: 10px 20px;
      background: #07ab0e;
      color: #fff;
      border: 0;
      font-weight: bold;
      border-radius: 3px;
      cursor: pointer;
    }

    .red {
      background: #F44336;
    }
    img{
      width: 600px;
      padding-left: 20px;
      padding-top: 15px;
    }

var observer = new PerformanceObserver(list => {
      console.log(list.getEntries());
    });

    observer.observe({entryTypes: ['resource', 'mark', 'measure']});

    performance.mark('start');

    for(let i=0; i<1000;i++){
      console.log('print');  
    }

    performance.mark('end');

    function markDone() {
      performance.mark('done');
    }

    performance.measure('start to end', 'start', 'end');

    function disconnect(){
      observer.disconnect();
    }