JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list"></ul>

JavaScript

const UL = document.querySelector("#list");

const shuffle = (a) => {
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

const arrOrdered = Array.from(Array(1000).keys());
const arrShuffle = shuffle([...arrOrdered]);

const prepare = () => {
  UL.innerHTML = arrOrdered.reduce((h,i) => h += `<li>${i}</li>`, "");
}

const test_DF = () => {
  prepare();
  console.time("Test: DocumentFra");
  const LI = UL.querySelectorAll('li'); 
  const liReordered = arrShuffle.reduce((DF, i) => (DF.append(LI[i]), DF), new DocumentFragment());
  UL.append(liReordered);
  console.timeEnd("Test: DocumentFra");
}

const test_DE = () => {
  prepare();
  console.time("Test: Destructure");
  const LI = UL.querySelectorAll('li'); 
  UL.append(...arrShuffle.map(i => LI[i]));
  console.timeEnd("Test: Destructure");
}

test_DF();
test_DE();