我可以加快這個頁面的異步加載嗎？

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，好了，似乎一切都變了^^」