javascript - 我怎样才能让这个javascript更有效率呢？

Question

我从 ajax 请求中收到一段纯 html。

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

这是最简单的形式。每件作品都包含一个<h1>标题标签和 <div>包含内容的标签。我有一个格式很好的container在需要用返回的 html 片段填充的 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);
}