<h3 id="results"></h3>
<button onClick="timeBackwards()">Time Backwards</button>
<button onClick="timeForwards()">Time Forwards</button>
<button onClick="timeOfLoop()">Time For...Of</button>
<button onClick="timeForEach()">Time forEach</button>
<button onClick="timeJqueryEach()">Time Jquery Each</button>
var arr = []
for(let i = 0; i < 1000000000;i++){
  arr.push(i)
}

function timeForwards(){
  let t0 = performance.now();
  for (let i = 0; i< arr.length; i++){
  }
  let t1 = performance.now();
  document.getElementById("results").innerHTML = "Call to timeForwards took " + (t1 - t0) + " milliseconds.";
}

function timeBackwards(){
  let t0 = performance.now();
  for (let i = arr.length-1; i>=0; i--){
  }
  let t1 = performance.now();
  document.getElementById("results").innerHTML = "Call to timeBackwards took " + (t1 - t0) + " milliseconds.";
}

function timeForEach(){
  let t0 = performance.now();
  arr.forEach(function(element) {
  });
  let t1 = performance.now();
  document.getElementById("results").innerHTML = "Call to timeForEach took " + (t1 - t0) + " milliseconds.";
}

function timeOfLoop(){
  let t0 = performance.now();
  for (let item of arr){
  }
  let t1 = performance.now();
  document.getElementById("results").innerHTML = "Call to timeOfLoop took " + (t1 - t0) + " milliseconds.";
}

function timeJqueryEach(){
  let t0 = performance.now();
  $.each(arr, function( index, value ) {
  });
  let t1 = performance.now();
  document.getElementById("results").innerHTML = "Call to timeJqueryEach took " + (t1 - t0) + " milliseconds.";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js