插入大量动态 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);
}

Answer 2

您可以尝试为 requestAnimationFrame 切换 setInterval，然后将 create 函数的内容放在时钟函数的顶部。函数调用非常昂贵。

实时示例：http://codepen.io/larryjoelane/pen/GodmXE

JavaScript：

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

 // run
 //create();
 clock();

function clock() {

  //formally part of the create
  //function
  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);
  //end create function

    window.requestAnimationFrame(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]);
        }
    }

    window.requestAnimationFrame(clock);
  });
}

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

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

  return temp_var;
}

function create() {

}