Improve performance while selecting element from DOM

Question

I have more than 20,000 records(rows) in my DOM. Each row has one checkbox and and textbox. When I check any checkbox its corresponding textbox should get disabled that's how logic works.

If Checkbox has id '1' then its corresponding textbox's id is 'text_1',the logic is textbox's id ="text_"+checkbox_id

Scenario : If I have list 10000 id's in random order (of checkboxes), I have to disable their corresponding textbox. My logic below

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

This logic takes around 10-12 sec to disabled all the textboxes.

Is there any way to improve performance.

`id` selector is quick then `class` but you should use `for` loop. — Parth Trivedi, Jan 27 '16 at 12:03
give them a class maybe and select all with that class and add the disabled attribute — thatOneGuy, Jan 27 '16 at 12:03
Can you share HTML? and proper code rather than just couple of line of code — Satpal, Jan 27 '16 at 12:05
@Suraj id inside each is index not html id attribute so its little bit unclear with your code. — Bhojendra Rauniyar, Jan 27 '16 at 12:11
Not sure what you meant by random, but is text box N in the same row as Id N? If so going through the steps down/up the DOM might be faster than researching it completely. — John Hascall, Jan 27 '16 at 12:18
@BhojendraNepal that was 10 times worse https://jsfiddle.net/arunpjohny/5vcu3zjx/3/ vs https://jsfiddle.net/arunpjohny/5vcu3zjx/5/ - but can try https://jsfiddle.net/arunpjohny/5vcu3zjx/6/ — Arun P Johny, Jan 27 '16 at 12:27
You can try https://jsfiddle.net/arunpjohny/5vcu3zjx/6/ - I still don't think it should take 10 second... the base test is getting over in 11 milliseconds — Arun P Johny, Jan 27 '16 at 12:29

score 2 · Answer 1 · answered Jan 27 '16 at 12:47

Try this non-jQuery version:

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 = '';
    }
});

It takes around 350ms - 400ms, on my computer, to disable 10000 checkboxes out of 20000 inputs, running Firefox 43.0.4.

Try it here:

//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');

KAD · Answer 2 · 2016-01-27T12:21:38.517

1

You can select them by attribute value starting with using the ^= operator:

 $('input[id^=text]').attr("disabled",true).val("");

edited Jan 27 '16 at 12:21

answered Jan 27 '16 at 12:05

KAD

10,972
4
31
73

thatOneGuy · Answer 3 · 2016-01-27T13:47:59.330

1

Give them a class and select all with that class and add the disabled attribute.

Give the text boxes a class then select them rather than looping

var thisClass = 'textBoxes'; //class for textboxes
$('.'+thisClass).attr('disabled',true);

To test it :

     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

edited Jan 27 '16 at 13:47

answered Jan 27 '16 at 12:05

thatOneGuy

9,977
7
48
90

1

can you please give demo for that? – Ankit Kathiriya Jan 27 '16 at 12:18
1

@thisOneGuy you should make performance demo with time taken. – Parth Trivedi Jan 27 '16 at 12:26
how can i test this? – Ankit Kathiriya Jan 27 '16 at 12:26
http://stackoverflow.com/questions/111368/how-do-you-performance-test-javascript-code – thatOneGuy Jan 27 '16 at 12:29
the second answer. Pass the current time to a variable, run the function, pass the new time to new variable and see the difference between the two – thatOneGuy Jan 27 '16 at 12:29
@thisOneGuy what do you mean by `function1` and `+new Date()` – Ankit Kathiriya Jan 27 '16 at 12:47
put your logic in a function and call it after you log the start time and before you log the end time. the 'new Date()' gives you the time at that moment in milliseconds. – thatOneGuy Jan 27 '16 at 13:45

score 1 · Answer 4 · edited Jan 27 '16 at 12:46

I have made demo with time Difference in different statements for,each and join with id-selector. Check in browser 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">

score 0 · Answer 5 · answered Jan 27 '16 at 12:24

<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>

Improve performance while selecting element from DOM

5 Answers5