<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();
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.