javascript - 插入大量动态 DOM 元素时性能低下

Question

我需要创建一个流程脚本，每秒在不同的列中插入 1000 个元素，当数量达到每列 30 个元素时，我将删除它们。

我注意到我可以使用 CSS 来插入数据，因为当我每个元素有 100 列和 50 行时，DOM 元素的绝对数量会减慢；整个过程变得断断续续。

我正在创建元素并将其存储在数组中，以提高性能。

如何在纯 JavaScript 中以更好的性能执行此任务？

https://jsfiddle.net/r7qpmd4o/4/

<script>
    var elems = [],
            buffer = 1000,
        temp_row,
        temp_col,
        temp_var;

     // run
     create();
     clock();

    function clock() {
        setInterval(function() {
        for(var i = 0; i < 10; i++) {
            temp_col = document.getElementById('col' + i);

          temp_row = pop();

             if(temp_col.firstChild) {
                temp_col.insertBefore(temp_row, temp_col.firstChild);
            }
            else {
                temp_col.appendChild(temp_row);
            }

            if(temp_col.childNodes.length > 30) {
                temp_col.removeChild(temp_col.childNodes[30]);
            }
        }
      }, 1);
    }

    function pop() {
        if(elems.length < 1) {
            create();
      }

        temp_var = elems[elems.length -1];
      elems.pop();

      return temp_var;
    }

    function create() {
        for(var i = 0; i < buffer; i++) {
        temp_row = document.createElement('div');
        temp_row.className = 'a';

        elems.push(temp_row);
      }

      console.log('Elems created: ' + buffer);
    }
</script>

Answer 1

<script>
var elems = [],
        buffer = 1000,
    temp_row,
    temp_col,
    temp_var;

 // run
 create();
 clock();
 var nodeCOunter = 0; //counts what node until 30 hits
function clock() {
    setInterval(function() {
    for(var i = 0; i < 10; i++) {
        temp_col = document.getElementById('col' + i);

      temp_row = pop();

         if(temp_col.firstChild) {
            temp_col.insertBefore(temp_row, temp_col.firstChild);
        }
        else {
            temp_col.appendChild(temp_row);
        }

        if(nodeCounter == 30){
           temp_col.removeChild(temp_col.childNodes[30]);
           nodeCounter = 0; //reset
        }
          else
        {
           nodeCounter += 1; 

    }
  }, 1);
}

function pop() {
    if(elems.length < 1) {
        create();
  }

    temp_var = elems[elems.length -1];
  elems.pop();

  return temp_var;
}

function create() {
    for(var i = 0; i < buffer; i++) {
    temp_row = document.createElement('div');
    temp_row.className = 'a';

    elems.push(temp_row);
  }

  console.log('Elems created: ' + buffer);
}