我需要创建一个流程脚本,每秒在不同的列中插入 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>
最佳答案
<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);
}
关于javascript - 插入大量动态 DOM 元素时性能低下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35052422/