JSFiddle - React, Tailwind, and code Playground

HTML

<label>
  <input type="checkbox" id="withProfiling">
  With profiling
</label>
<br>
<button id="btn">Start</button>

<div id="box"></div>

CSS

#box {
			width: 5px; height: 5px;
			background-color: black;
			position: absolute;
			top: 50%;
			left: 50%;
		}

JavaScript

var btn = document.querySelector('#btn');
var withProfiling = document.querySelector('#withProfiling');
var box = document.querySelector('#box');

btn.addEventListener('click', function() {
  console.time('click handler');

  if (withProfiling.checked) {
    console.profile();
  }

  for (var i = 0; i < 1000000; i++) {
    box.style.top = getRandomInt(0, 100) + '%';
    box.style.left = getRandomInt(0, 100) + '%';				
  };

  if (withProfiling.checked) {
    console.profileEnd();
  }

  console.timeEnd('click handler');
});

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}