javascript - 从 DOM 中选择元素时提高性能

Question

我的 DOM 中有超过 20,000 条记录(行)。每行都有一个复选框和一个文本框。当我选中任何复选框时，其对应的文本框应该被禁用，这就是逻辑的工作原理。

如果 Checkbox 有 id '1' 那么它对应的 textbox 的 id 是 'text_1'，逻辑是文本框的id="text_"+checkbox_id

场景:如果我以随机顺序(复选框)列出 10000 个 ID，我必须禁用它们相应的文本框。我的逻辑如下

idList.each(function(id){
        $('#text'+id).attr("disabled",true).val("");
      }
    });

此逻辑需要大约 10-12 秒才能禁用所有文本框。

有什么方法可以提高性能。

Answer 1

试试这个非 jQuery 版本:

Array.prototype.slice.call(document.getElementsByTagName('input')).map(function(input){
    if(input.tagName == 'INPUT' && input.type == 'checkbox' && /^text_\d+$/.test(input.id))
    {
        input.disabled = 'disabled';
        input.value = '';
    }
});

在运行 Firefox 43.0.4 的计算机上，禁用 20000 个输入中的 10000 个复选框大约需要 350 毫秒 - 400 毫秒。

在这里试试:

//Generate the inputs:
for(var i = 0, html = ''; i < 10000; i++)
	html += '<input type="checkbox" id="text_' + i + '"><input type="text" id="text_' + i + '_">';

document.body.innerHTML += html;


alert('Starting the test');

//Code to be tested comes here
var start = performance.now();

Array.prototype.slice.call(document.getElementsByTagName('input')).map(function(input){
	if(input.tagName == 'INPUT' && input.type == 'checkbox' && /^text_\d+$/.test(input.id))
	{
		input.disabled = 'disabled';
		input.value = '';
	}
});

var end = performance.now();

alert('Time: ' + (end - start) + 'ms');