How to optimize "Parse HTML" events?

Question

While profiling my webapp I noticed that my server is lighting fast and Chrome seems to be the bottleneck. I fired up Chrome's "timeline" developer tool and got the following numbers:

Total time: 523ms
Scripting: 369ms (70%)

I also ran a few console.log(performance.now()) from the main Javascript file and the load time is actually closer to 700ms. This is pretty shocking for what I am rendering (an empty table and 2 buttons).

I continued my investigation by drilling into "Scripting":

Evaluating jQuery-min.js: 33ms
Evaluating jQuery-UI-min.js: 50ms
Evaluating raphael-min.js: 29ms
Evaluating content.js: 41ms
Evaluating jQuery.js: 12ms
Evaluating content.js: 19ms
GC Event: 63 ms

(I didn't list the smaller scripts but they accounted for the remaining time) I don't know what to make of this.

1. Are these numbers normal?
2. Where do I go from here? Are there other tools I should be running?
3. How do I optimize Parse HTML events?

Answer 1

I think Parse HTML events happen every time you modify the inner HTML of an element, e.g.

$("#someiD").html(text);

A common style is to repeatedly append elements:

$.each(something, function() {
    $("#someTable").append("<tr>...</tr>");
});

This will parse the HTML for each row that's added. You can optimize this with:

var tablebody = '';
$.each(something, function() {
    tablebody += "<tr>...</tr>";
});
$("#someTable").html(tablebody);

Now it parses the entire thing at once, instead of repeatedly parsing it.

Answer 2

For all the cynicism this question received, I am amused to discover they were all wrong.

I found Chrome's profiler output hard to interpret so I turned to console.log(performance.now()). This led me to discover that the page was taking 1400 ms to load the Javascript files, before I even invoke a single line of code!

This didn't make much sense, so revisited Chrome's Javascript profiler tool. The default sorting order Heavy (Bottom Up) didn't reveal anything meaningful, so I switched over to Chart mode. This revealed that many browser plugins were being loaded, and they were taking much longer to run than I had anticipated. So I disabled all plugins and reloaded the page. Guess what? The load time went down to 147ms.

That's right: browser plugins were responsible for 90% of the load time!

So to conclude:

• JQuery is substantially slower than native APIs, but this might be irrelevant in the grand scheme of things. This is why good programmers use profilers to find bottlenecks, as opposed to optimizing blindly. Don't trust people's subjective bias or a "gut feeling". Had I followed people's advise to optimize away JQuery it wouldn't have made a noticeable difference (I would have saved 100ms).
• The timeline tool doesn't report the correct total time. Skip the pretty graphs and use the following tools...
• Start simple. Use console.log(performance.now()) to verify basic assumptions.
• Chrome's Javascript profiler
  • Chart will give you a chronological overview of the Javascript execution.
  • Tree (Top Down) will allow you to drill into methods, one level at a time.
• Turn off all browser plugins, restart the browser, and try again. You'd be surprised how much overhead some plugins contribute!

I hope this helps others.

PS: There is a nice article at http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/ which helps if you want to replace jQuery with the native APIs.