リフローとリペイント

デモ：https://codepen.io/mo4_9/pen/Omdqjz

append()処理が重かったのでその原因調査
まずダメな例

処理が重い(DOMツリーにappendするのは1000回)

function createNumber(num){
  const elm = document.createElement('li');
  elm.textContent = num;
  $('.list').append(elm)
}
for(let i = 0; i < 1000; i++){
  createNumber(Math.random()*1000);
}

DOMノードが更新されると、リフロー（要素の大きさ、位置などの再計算）とリペイント（描画）が行われる。
故にDocumentFragment(描画に利用されるDOMツリーには現れないDOMノード)を使用して、DOMノードを更新する回数を最小限にすれば良い。

処理が軽い(DOMツリーにappendするのは1回)

const docfrag = document.createDocumentFragment();

function createNumber(num){
  const elm = document.createElement('li');
  elm.textContent = num;
  $(docfrag).append(elm)
}
for(let i = 0; i < 1000; i++){
  createNumber(Math.random()*1000);
}

$('.list').append(docfrag)

参考
ブラウザ動作の理解－リフローとリペイント及びその最適化