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

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快得多。如果我加载< 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，好了，似乎一切都变了^^”