CODEWITHSUNDEEP
javascriptcompressiongoogle-closure-compileryui-compressorpacker
Chielus
Chielus

Reputation: 632

Testing out the performance gain of compressing JavaScript code

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!

Upvotes: 6

Views: 1008

Answers (4)

Seth
Seth

Reputation: 46423

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.

Upvotes: 1

Stephen Chung
Stephen Chung

Reputation: 14605

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.

Upvotes: 0

sushil bharwani
sushil bharwani

Reputation: 30187

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

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074248

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

Upvotes: 0

Related Questions