CODEWITHSUNDEEP
javascriptperformancebrowserpagespeed
i_like_robots
i_like_robots

Reputation: 2787

JavaScript browser parsing speed testing

I'm looking into the speed of JavaScript parsers in web browsers, importantly it needs to be easy to demonstrate. I came up with a simple test - the idea being that each script block is parsed and executed individually, so a large block of script could be timed:

<script>var start = new Date().getTime();</script>

<script>
    /*! jQuery v1.8.2 jquery.com | jquery.org/license */
    ...
</script>

<script>alert ( new Date().getTime() - start );</script>

Superficially this appears to work, removing the middle script block will result in a negligible time.

However I'm not certain that my logic is not fundamentally flawed.

Upvotes: 2

Views: 1766

Answers (5)

Rounin
Rounin

Reputation: 29453

This answer is from 10 years in the future.

There are a number of approaches to timing web page processes including:

  1. Date-related methods:
    • Date.now();

and:

  1. console.time-related methods:
    • console.time('myTimer');
    • console.timeLog('myTimer');
    • console.timeEnd('myTimer');

but, since late 2015, the ideal way to time web page processes using high-resolution timestamps has been:

  • window.performance.now();

Using Performance:

The Performance interface, accessed via window.performance has numerous methods, including:

  • timeOrigin
  • mark
  • measure
  • getEntries
  • toJSON

and more.

But in order to time a script, all you need is window.performance.now():

let scriptStart = window.performance.now();
let scriptEnd = window.performance.now();
let scriptDuration = (scriptEnd - scriptStart);

Working Example:

let paragraph = document.querySelector('p');
let button = document.querySelector('button');

const runTimedScript = () => {

  let scriptStart = window.performance.now();

  for (let i = 0; i < 10000; i++) {
    paragraph.textContent = 'Loop iteration ' + (i + 1);
  }

  let scriptEnd = window.performance.now();

  let scriptDuration = (scriptEnd - scriptStart);
  
  button.textContent = 'Re-run Script';

  console.log('The script ran in ' + scriptDuration + ' milliseconds');
}
  
button.addEventListener('click', runTimedScript, false);
button {
  cursor: pointer;
}
<p></p>
<button type="button">Run Script</button>
<p>To see how long the script takes to run,<br />
click the button above repeatedly.</p>

Further Reading:

To find out more about the Performance Interface, see:

Upvotes: 0

Bergi
Bergi

Reputation: 664185

You might want to differentiate between parsing and execution time. You could do something like

<script>start = Date.now();</script>
<script>
    parsed = Date.now();
    /*! jQuery v1.8.2 jquery.com | jquery.org/license */
    …
</script>
<script>var end = Date.now();
   alert ( "parsed in " + (parsed - start) + "ms" );
   alert ( "executed in " + (end - parsed) + "ms" );
   alert ( "overall time: " + (end - start) + "ms" );
</script>

With that you might be able to detect cached parse trees etc. Yet, for more distinct information have a look at your developer tools, they show such type of information in their profiler section. Or in Opera, it's included in the load process of scripts in the network panel.

Upvotes: 0

i_like_robots
i_like_robots

Reputation: 2787

It seems the answer is broadly yes, but to get a reasonable result (like anything else) the test should be run many times to level out the effects of compilation caching and garbage collection. The test above can easily be placed into the Parse-n-Load library: http://carlos.bueno.org/2010/02/measuring-javascript-parse-and-load.html

Thanks for your help

Upvotes: 1

tobspr
tobspr

Reputation: 8376

If you want to benchmark your JavaScript, include MilliSeconds etc.

var t = new Date();
var start = t.getTime()*1000 + t.getMilliseconds();

/* do something*/

var t2 = new Date();
var end = t2.getTime()*1000 + t.getMilliseconds();

alert("The Code needed " + (end-start) + " milliseconds. That are " + parseInt((end-start)/1000) + " seconds.");

Upvotes: 0

topcat3
topcat3

Reputation: 2642

This may be of help!

var start = new Date().getTime();
var end = new Date().getTime();
var time = end - start;
alert('Execution time: ' + time);

Upvotes: 0

Related Questions