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);
}

一切似乎都在“正常”，后续的ajax请求加载了不同的html内容。但是，当我单击一个调用整页刷新的链接时，它会在加载点击的超链接之前挂起约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

我会使用调试器来查找延迟的来源。像FireFox和FireBug这样的东西来验证触发整页刷新的链接实际上是在调用这段代码而不是挂在其他地方。 FireFox和TamperData一起观察正在出去的请求，看看延迟是否是由等待外部响应引起的。

:(

如何让这个javascript更有效率？

2 个答案: