Testing out the performance gain of compressing JavaScript code

Question

I have used 5 JavaScript compressors to compress a JavaScript library (JSMin, YUI compressor, Packer, closure compiler and UglifyJS)

Now I know that closure compiler is the winner in reducing the filesize. However, I also want to test out the performance gains. What would be a good way to do this?

I made a simple test page that uses all the library's public methods. Is there a tool for testing out the page speed of this test page? Eg. running it X times on a browser and return the average loading speed.

Thanks for your answers!

What do you want to measure? Load time via HTTP over the public network? The time the JavaScript parser spends parsing the JavaScript text? The time the interpreter spends running the result? The majority of the tools you've listed will only help with the first (HTTP load time), the Closure compiler being the odd man out because it actually modifies your code (inlining functions, etc.) whereas the others are largely about symbol length reduction and (in some cases) obfuscation. — T.J. Crowder
– T.J. Crowder, Commented May 24, 2011 at 8:22
possible duplicate of What is the best way to profile javascript execution? — Felix Kling
– Felix Kling, Commented May 24, 2011 at 8:25
The whole package. I want to test the speed gain for the user. Stopwatch from getting the testpage till every public method has finished. — Chielus
– Chielus, Commented May 24, 2011 at 8:27
Some say compressed code with google's closure compiler can actually reduce the performance... So I would like to test what gives the best efficiency: Uncompressed, Compressed or Compiled. — Chielus
– Chielus, Commented May 24, 2011 at 8:30
@Chielus use the search. That topic has been covered many times. The best is closure compiler the slowest is Packer. — sra
– sra, Commented May 24, 2011 at 8:30

Seth · Accepted Answer · 2011-06-08 00:41:17Z

There's no need to be complex about it:

<html>
<head>
    <script>
    var time = new Date();
    </script>
    <script src="..."></script>
    ... more scripts ... 
</head>

<body>
<script>
    document.write("Time: " + String((new Date() - time)/1000) + " seconds");
</script>
</body>
</html>

Scripts in the <head> generally load serially, so this should be a reasonable method for measuring script execution time. If you have scripts executing form <body onload="...">, then do the time elapsed calculation at the end of that function instead of the end of the body.

This method would not measure execution time for "asynchronous" functions executed via setTimeout or setInterval, but those shouldn't count against load time.

An alternative and likely simpler option is to use the javascript profiler built-in to Chrome or Safari's web inspector.

T.J. Crowder · Accepted Answer · 2011-05-24 08:30:53Z

0

I suspect the PageSpeed tool is what you're looking for.

answered May 24, 2011 at 8:30

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

4 Comments

Chielus Over a year ago

I knew about pagespeed, its timeline feature can be useful. However, it's only useful for running once. It would be better to run it X times and take an average. Can this be done somehow?

symcbean Over a year ago

In practice its very difficult to use this to measure actual improvements in performance without using a network throttler.

T.J. Crowder Over a year ago

@symcbean: Yeah. Or my equivalent of a network throttler: A slow VPS server somewhere on a 100Mbit (or even 10Mbit) connection. :-)

Chielus Over a year ago

It doesn't need to be precise, It just has to provide a comparison between the compressors

sushil bharwani · Accepted Answer · 2011-05-24 08:33:18Z

0

Use PageSpeed or YSlow on firefox or HTTPAnaylser on IE to test the time load differences.

answered May 24, 2011 at 8:33

sushil bharwani

30.2k30 gold badges98 silver badges130 bronze badges

Comments

Stephen Chung · Accepted Answer · 2011-05-25 07:39:05Z

0

It really depends on what your audience cares most about the site. Time to appear on screen? Time to load-complete? Animation smoothness? Interactive responsiveness? Or raw calculation speed?

You should profile your site compressed with different minifiers based on what the most important metrics are.

Side Note: The Closure Compiler in Simple Mode only yields minimal speedup's. It gets file size down, but the JavaScript program remains the same. To get significant code reduction and speed optimizations, you have to use Advanced Mode.

answered May 25, 2011 at 7:39

Stephen Chung

14.6k1 gold badge37 silver badges48 bronze badges

Collectives™ on Stack Overflow

Testing out the performance gain of compressing JavaScript code

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related