Question

I’m loading a search result into a table with the JQuery below:

$("#searchForm").submit(function (event) {
    event.preventDefault();
    $.post($(this).attr('action'), $(this).serialize(),
    function (data) {
        if ($("#addResult").is(':checked')) {
            $("#myTable tbody").append(data);
        } else {
            $("#myTable tbody").html(data);
        }
        $("#myTable").trigger("update");
    });
});  

The data I return is a varying number of rows: <tr></tr>...<tr></tr>.

Firefox is of course much faster than IE. If I load < 1k rows it’s pretty fast in both browsers. But when I return ~9k rows IE hangs for about 5sec before presenting the data. It’s also very slow to scroll all rows in IE. I don’t use paging but I want to know if there’s a way around this before I start paging the result?

I also get an error in IE when I click any link, to move away from the search page, about a slow running script. But why do I get this when I move away from the page? I don’t have any scripts that should run at that point? Or do IE do something behind the scenes when browsing away from a large search result?

Answer 1

Insertion of that many items is going to be tough for browsers to handle. Perhaps you should change your approach. Maybe you could paginate it a number of items that provides usability and performance. Say 1000? Then you only ever insert 1000 at a time.

The DOM is a slow creature. It’s best not poke it with such a large stick if you can avoid it.