JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <h1>
  DOM <button type="button" id="reverse">reverse list</button>
  <span id="time"></span>
  </h1>
  
  <div id="output"></div>
</div>

JavaScript

const items = []

for (let i = 0; i < 10000; i++) {
  items.push(i)
}

const output = document.getElementById('output')
const time = document.getElementById('time')

const render = () => {
	let html = ''
  
  for (let i = 0; i < items.length; i++) {
  	html += '<h2>Item #' + items[i] + '</h2>'
  }
  
  output.innerHTML = html
}

render()

document.getElementById('reverse').addEventListener('click', () => {
	const start = performance.now()
	items.reverse()
	render()
  time.textContent = 'Took ' + (performance.now() - start).toFixed(2) + ' ms'
}, {passive: true})