javascript - How to optimize "Parse HTML" events? - Stack Overflow

admin管理员组

文章数量:1296401

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?

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?

• javascript
• google-chrome

Share Improve this question Follow asked Jun 7, 2014 at 1:24 GiliGili 90k105105 gold badges412412 silver badges720720 bronze badges 23

• 6 Uh… stop using slow libraries? – bjb568 Commented Jun 7, 2014 at 1:26
• 2 Why do you have jQuery included twice? – cookie monster Commented Jun 7, 2014 at 1:30
• 1 i like how jQuery executes 3X faster than jQuery-min... checkout yslow and follow its advice. – dandavis Commented Jun 7, 2014 at 1:38
• 4 @bjb568 wow! Even with all features it's still only 25 bytes! Are there any similar libraries for document markup or webpage styling?! – JustcallmeDrago Commented Jun 7, 2014 at 1:57
• 2 @JustcallmeDrago That's called "vanilla CSS". Their website happens to be down right now, but I already downloaded the CSS file. Here it is: – bjb568 Commented Jun 7, 2014 at 2:21

 |  Show 18 more comments

2 Answers 2

Sorted by: Reset to default 20

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.

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.

本文标签： javascriptHow to optimize quotParse HTMLquot eventsStack Overflow