<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <style> 
    #box {
      width: 5px;
      height: 5px;
      background: black;
      position: absolute;
      top: 50%;
      left: 50%;
    }
    
    .auto {
      margin-left: 50px;
    }
  </style>
</head>

<body>
  <button onclick="ManualTest()"> Manual Test</button>
  <button onclick="AutomaticTest()"> Auto Test</button>
  <div id="result"></div>
  <div id="box"></div>

  <script>
    var percent = [];
    var data = [80, 90, 15, 5, 70, 50, 60, 25, 36, 45, 62, 58, 76, 23, 93];
    var box = document.querySelector("#box");

    function AutomaticTest() {
      for (var i = 0; i < 1000; i++) {
        ManualTest();
      }
    }


    function ManualTest() {

      var result = CheckPerformance();
      percent.push(result);

      var calcaulatePercent = 0;
      for (var i = 0; i < percent.length; i++) {
        calcaulatePercent += percent[i];
      }

      document.getElementById("result").innerHTML = "<br/>Current sample:" + result + "<br/><br/>Average: " + (calcaulatePercent / percent.length) + "<br/><br/>Sample Count:" + percent.length;
    }

    function CheckPerformance() {

      var time = window.performance.now();
      for (var i = 0, v = 0; i < 1000; i++, v++) {

        box.style.top = data[v] + '%';
        box.style.left = data[v] + '%';

        if (v >= 14) {
          v = 0;
        }
      }
      return window.performance.now() - time;
    }
  </script>

</html>