JSFiddle - React, Tailwind, and code Playground

by balefrost

HTML

<div id="stats">
  ...
</div>

JavaScript

const stats = document.getElementById("stats");

const desiredTimeSeriesLength = 40;
const itemsPerIteration = 1000;
const timeSeries = [];

function addAndRemoveElements() {
	while (timeSeries.length > desiredTimeSeriesLength) {
  	timeSeries.shift();
  }
  if (timeSeries.length == desiredTimeSeriesLength) {
  	const totalElapsed = timeSeries[timeSeries.length - 1] - timeSeries[0];
    const averageMsPerIteration = totalElapsed / timeSeries.length;
    const averageSecondsPerIteration = averageMsPerIteration / 1000;
    const averageItemsPerSecond = itemsPerIteration / averageSecondsPerIteration;
    stats.innerText = `${Math.round(averageItemsPerSecond)} items per second`;
  }
	const elements = [];
  for (let i = 0; i < itemsPerIteration; ++i) {
  	const el = document.createElement("div");
    el.innerText = "Hooha! " + Date.now();
    window.document.body.appendChild(el);
  	elements.push(el);
  }
  
  setTimeout(() => {
  	for (el of elements) {
    	el.remove();
    }
  }, 5);
  
  timeSeries.push(Date.now());
}

setInterval(addAndRemoveElements, 10);