0

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?

Niklas
  • 13,005
  • 23
  • 79
  • 119

3 Answers3

2

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.

Alex Wayne
  • 178,991
  • 47
  • 309
  • 337
  • 9k rows is not a large stick its a `.22 caliber` :) – Rafay Aug 22 '11 at 09:04
  • Yeah, I just wanted to be sure there weren't any way around it. Pagination it is then... – Niklas Aug 22 '11 at 09:05
  • Definitely good advice to avoid manipulating the DOM like that. I'd get the OP to have a read of this. http://dev.opera.com/articles/view/efficient-javascript/?page=3 – James South Aug 22 '11 at 09:06
0

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

T. Junghans
  • 11,385
  • 7
  • 52
  • 75
0

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

roselan
  • 3,755
  • 1
  • 20
  • 20
  • I get an error on `elm.innerHTML = data`. I also googled it and it says innerHTML is difficult to use with `tr` and tables in generall. Have you gotten this to work yourself? – Niklas Aug 22 '11 at 11:13
  • I could get it work, i have updated my response with what I use in production. Could you please tell me your error. I remember I got issues with several "tbody" created in some bad old browser. – roselan Aug 22 '11 at 11:32
  • I added the console.time and I got these times: `load:1868ms`(3.8megs) and `append:1557ms`. I load 9k rows. This is measured in Firefox since IE can't handle console.time – Niklas Aug 22 '11 at 11:48
  • It just says `unknown runtime error` in IE8 on this line: `elm.innerHTML = data;`. I don't know what more to give you =/ – Niklas Aug 22 '11 at 11:53
  • arf it's some ie8 limitation: [linkage](http://stackoverflow.com/questions/555965/javascript-replace-innerhtml-throwing-unknown-runtime-error) and [linkage](http://www.theogray.com/blog/2009/06/internet-explorer-unknown-runtime-error). Anyway, as said, pagination seems indeed the way to go. You won't be able to display these 9k rows much faster. – roselan Aug 22 '11 at 12:38