<!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>