從DOM中選擇元素時提高性能
[英]Improve performance while selecting element from DOM
問題描述
我的DOM中有超過20,000條記錄（行）。 每行都有一個復選框和文本框。 當我選中任何復選框時，其相應的文本框應該被禁用，邏輯是如何工作的。
如果Checkbox的ID為'1'，則其對應的文本框ID為'text_1'，邏輯為textbox的id =“text _”+ checkbox_id
場景：如果我以隨機順序（復選框）列出10000個id，我必須禁用它們相應的文本框。 我的邏輯如下
idList.each(function(id){
$('#text'+id).attr("disabled",true).val("");
}
});
此邏輯大約需要10-12秒才能禁用所有文本框。
有沒有辦法提高性能。
5 個解決方案
解決方案1
2 2016-01-27 12:47:39
試試這個非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 = '';
}
});
在我的計算機上，需要大約350毫秒到400毫秒才能禁用20000個輸入中的10000個復選框，運行Firefox 43.0.4。
試試吧：
//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');
解決方案2
1 2016-01-27 12:05:31
您可以使用^=運算符從屬性值中選擇它們：
$('input[id^=text]').attr("disabled",true).val("");
解決方案3
1 2016-01-27 12:05:38
為它們提供一個類，並選擇所有類，並添加disabled屬性。
給文本框一個類，然后選擇它們而不是循環
var thisClass = 'textBoxes'; //class for textboxes
$('.'+thisClass).attr('disabled',true);
測試它：
function disableText(){
var thisClass = 'textBoxes'; //class for textboxes
$('.'+thisClass).attr('disabled',true);
};
var start = +new Date(); // log start timestamp
console.log(start);
disableText();//run your change here
var end = +new Date(); // log end timestamp
console.log(end);
var diff = end - start;
console.log(diff);//this is the speed it ran at
解決方案4
1 2016-01-27 12:35:40
我做了演示，在不同的陳述時間差for ， each並join與id-selector 。 簽入瀏覽器console 。
var idList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 91, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log("Each Loop"); var start = new Date().getTime(); $(idList).each(function(id) { $('#text' + id).attr("disabled", true).val(""); }); console.log((new Date().getTime() - start) +" ms" ); console.log("For Loop"); start = new Date().getTime(); for (var i = 0; i < idList.length; i++) { $('#text' + idList[i]).attr("disabled", true).val(""); } console.log((new Date().getTime() - start) +" ms" ); console.log("Selector"); start = new Date().getTime(); $('#text' + idList.join(', #text')).prop("disabled", true).val(""); console.log((new Date().getTime() - start) +" ms" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="text1"> <input type="checkbox" id="text2"> <input type="checkbox" id="text3"> <input type="checkbox" id="text4"> <input type="checkbox" id="text5"> <input type="checkbox" id="text6"> <input type="checkbox" id="text7"> <input type="checkbox" id="text8"> <input type="checkbox" id="text9">
解決方案5
0 2016-01-27 12:24:48
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("#tbl tr").find('td input[type="checkbox"]').change(function () {
$(this).closest('tr').find('#text_'+$(this).attr("id")+'').attr('disabled','disabled')
});
});
</script>
</head>
<body>
<table style="width:100%" id="tbl">
<tr>
<td><input type="checkbox" id="checkbox1"</td>
<td><input type="text" id="text_checkbox1"</td>
<td>50</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox2"</td>
<td><input type="text" id="text_checkbox2"</td>
<td>50</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox3"</td>
<td><input type="text" id="text_checkbox4"</td>
<td>50</td>
</tr>
</table>
</body>
</html>
使用JavaScript和XPath從DOM中選擇元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.