CODEWITHSUNDEEP
javascriptjqueryhtmldom
Ashis Kumar
Ashis Kumar

Reputation: 6544

DOM Manipulation using javascript hangs the UI thread

I have a page that shows two drop downs, one for subject, and other for courses as like this

    <fieldset>
        <legend>Subject:</legend>
        <select id="subjectList" onchange="SetCourses()">
             <option value="">select subject</option>
             <option value="1">Html</option>
             <option value="2">Css</option>
             <option value="3">Javascript</option>
             <option value="4">Jquery</option>
             <option value="5">Php</option>
        </select>
    </fieldset>

    <fieldset>
        <legend>Courses:</legend>
        <select id="courseList">
             <option value="">select course</option>
        </select>
    </fieldset>

So with change of subject, the course drop down refresh with a huge list of courses (around 9000 - 10000 records) as like this

    function SetCourses() {
        var subject = $('#subjectList').val();
        var courseList = $('#courseList');
        var courseString = '<option value="">select course</option>';
        if (!!subject) {
            courseList.html(courseString);
        }
        else {
            $.ajax({
               url: "test.html",
               context: document.body
            }).done(function(data) {
               if(!!data) {
                  $.each(data, function(index, value) {
                     courseString += '<option value="'+value.id+'">'+value.text+'</option>'; 
                  });
                  courseList.html(courseString);   // this takes times 
               }
            });
        }
    }

Problem is that when the records are written to the course drop down, it takes nearly 10-12 sec and for that time page gets hang, and if in between that time you just get to click somewhere, then browser gets unresponsive for a longer period of time.

I have gone through debugging and found that till the success of ajax call the page is perfect and when it reaches the line to write the data, from that time its freeze the UI.

So whats the proper way to write such a huge data to DOM without freezing the UI?

Upvotes: 2

Views: 1078

Answers (2)

LRA
LRA

Reputation: 462

You should keep the user in mind. Populating dropdown with thousands of items is not a good user interface design.

Change your code and construct the whole string aside in memory and add it to the page after it is finished.

Edit: After I started to edit your code sample I sorted all the parenhesis and braces Irealized that your code already contains what i suggested. You may try to create DOM objects directly without string intermediate as HMR suggests in his comment.

Upvotes: 0

HMR
HMR

Reputation: 39260

I think for a list that long a drop down is inappropriate, try an auto complete: http://jqueryui.com/autocomplete/ I don't think any user is going to browse through 9 to 10 thousand items to find the course they're interested in.

As for the lagging; there are limits of what you can do and this is the limit. I don't see an easy optimize that'll fix it and it would be pointless to do so since nobody is going to use a dropdown containing thousands of items.

Would you?

Upvotes: 3

Related Questions