Can I speed up the asynchronous load of this page?

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></t开发者_如何学运维r>...<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?

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.

It looks like you are receiving html data. If you could have the server return a JSON object instead of html you could save on bandwidth. JSON is much leaner than xml or html. See also http://www.json.org/xml.html.

The tables can then be created using Javascript on client (browser).

jquery .append() and .html() are extremely slow, overall in tables.

you can use pure javascript object.innerHTML = ... instead, or at least try it to comapre.

$("#searchForm").submit(function (event) {
    event.preventDefault();
    $.post($(this).attr('action'), $(this).serialize(),
    function (data) {
        var elm = $("#myTable tbody").get(0);
        if ($("#addResult").is(':checked')) {
            elm.innerHTML += data;
        } else {
            elm.innerHTML = data;           
        }
        $("#myTable").trigger("update");
    });
});

here is what I use in production:

url = "yata.php";
    $('#waitMessage').show();
    console.log('start');
    console.time('load');
    $.get(url, function(data) {
        console.timeEnd('load');
        // 11 seconds to load all rows (14.8 megs)

        console.time('append');
        $('tbody').append(data);
        console.timeEnd('append');
        // 7 seconds

        /*
        console.time('appendChild');
        bod = $('tbody').get(0);
        bod.innerHTML += data;
        console.timeEnd('appendChild');
        */
        // 9 secondes

        $('#waitMessage').hide();

    });

herrr, well, seems things have changed ^^'