如何使此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可以监视正在发出并返回的请求，以查看延迟是否是由等待外部响应引起的。

:(