如何使此javascript更有效率？

Question

我從ajax請求中收到一段純HTML。

<h1>Title</h1>
<div>
  content
</div>

這是最簡單的形式。 每一塊都包含一個標題的<h1>標簽和一個包含內容的<div>標簽。 我在html頁面中有一個格式良好的container ，需要使用返回的html代碼段進行填充。

這是容器：

<div id="container">
  <div class="header">
  </div>
  <div class="content">
  </div>
</div>

我使用以下javascript函數解析html並將其放置在container 。

function loadContent(id, data) {
    var container = $('#'+id);
    var title = '';
    var content = '';

    $(data).filter('h1:first').each(function() {
        title = $(this).html();
        content = $(this).next().html();
    });

    $('div.header',container).html(title);
    $('div.content', container).html(content);
}

一切似乎都“正常”，隨后具有不同html內容的ajax請求將很快加載。 但是，當我單擊調用整個頁面刷新的鏈接時，它會掛起大約3或4秒鍾，然后再加載單擊的超鏈接。 這使我認為這是一個JavaScript問題，也許某些內容保留在內存中？ 有人可以看到這可能變得效率低下嗎？

Answer 1

我不確定我是否了解這里的意圖。 如果只分配一個標題/內容對，為什么要使用.each（）？

另外，請記住，Firebug本身通常會引起嚴重的性能問題。 在假設您的代碼是問題之前，請務必先禁用它進行測試。

最后，如果不是，請使用Firebug的探查器准確確定代碼的哪一部分運行緩慢。

根據評論更新 。 嘗試以下方法：

function loadContent(id, data) {
  var container = document.getElementById(id);

  var title = '';
  var content = '';

  $data = $(data);
  $title = $data.filter('h1:first');

  title = $title.html();
  content = $title.next().html();

  $('div.header', container).html(title);
  $('div.content', container).html(content);
}

Answer 2

我將使用調試器查找延遲的來源。 帶有FireBug的FireFox之類的東西可以驗證觸發整個頁面刷新的鏈接實際上是在調用此代碼，而不會掛在其他地方。 FireFox w / TamperData可以監視正在發出並返回的請求，以查看延遲是否是由等待外部響應引起的。

:(