How can I make this javascript more efficient?

Question

Hi,

i am receiving a piece of plain html from an ajax request.

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

This is the most simple form. Every piece contains a <h1> tag for a title, and a <div> tag containing the content. I have a nicely formatted container in the html page which needs to populate with the returned html snippet.

This is the container:

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

I use the following javascript function to parse the html and place it in the 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);
}

Everything seems to be working 'allright', subsequent ajax requests that have different html contents load pretty quickly. But when I click a link that invokes a full page refresh, it hangs for about 3 or 4 seconds before loading clicked hyperlink. This makes me think it is a javascript issue, maybe where some content stays in memory? Can somebody see where this might become inefficient?

Answer 1

I would use a debugger to find the source of the delay. Something like FireFox w/FireBug to verify that the link that triggers the full page refresh is actually calling this code and not getting hung up elsewhere. And FireFox w/TamperData to watch the requests that are going out and coming back to see if the delay is caused by waiting on an external response.

:(

Answer 2

I'm not sure if I understand the intent here. If you're only assigning one title/content pair, why the .each()?

Also, keep in mind that Firebug often causes significant performance issues itself. Be sure to test with it disabled before assuming your code is the problem.

Finally, if that's not it, use Firebug's profiler to determine exactly which part of your code is running slowly.

Update, based on comment. Try this instead:

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