Question

我正在使用下面的JQuery将搜索结果加载到表中：

$("#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");
    });
});

我返回的数据是不同数量的行：<tr></tr>...<tr></tr>。

Firefox当然比IE快得多。如果我加载＆lt; 1k行在两种浏览器中都非常快。但是当我返回~9k行时，IE会在呈现数据之前挂起约5秒钟。在IE中滚动所有行也很慢。我不使用分页，但我想知道在开始分页结果之前是否有办法解决这个问题？

当我点击任何链接，离开搜索页面时，我也会在IE中遇到错误，关于缓慢运行的脚本。但是当我离开页面时，为什么我会这样做呢？我没有任何应该在那时运行的脚本？或者，当浏览大型搜索结果时，IE会在幕后做些什么吗？

Answer 1

插入那么多项目对浏览器来说很难处理。也许你应该改变你的方法。也许你可以将它分成许多提供可用性和性能的项目。说1000？然后你一次只能插入1000个。

DOM是一种缓慢的生物。如果你能避免它，最好不要用这么大的棒戳它。

Answer 2

看起来你正在接收HTML数据。如果您可以让服务器返回JSON对象而不是html，则可以节省带宽。 JSON比xml或html更精简。另请参阅http://www.json.org/xml.html。

然后可以使用客户端（浏览器）上的Javascript创建表。

Answer 3

jquery .append（）和.html（）非常慢，总体来说就是表格。

你可以使用纯javascript object.innerHTML = ...代替，或者至少尝试使用它来进行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");
    });
});

这是我在制作中使用的内容：

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，好吧，事情似乎发生了变化^^'

我可以加快此页面的异步加载吗？

3 个答案: