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

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 快得多。如果我加载

当我单击任何链接以离开搜索页面时，我也会在 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 = ... 代替，或者至少尝试一下。

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

    });

嘿嘿，看来事情变了^^'