JavaScript browser parsing speed testing

Question

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.

Aside, but you may find it interesting to browse through the strategies employed by some of the performance tests submitted to JSPerf: jsperf.com/browse — rjz
– rjz, Commented Oct 22, 2012 at 16:14
You'll get an idea of timing on this, but don't forget the cache's effect on load and parse times. If the browser has seen a script before, it may cache the compiled code. Also, you're not the first person to be curious about parse speeds. carlos.bueno.org/2010/02/… — Heretic Monkey
– Heretic Monkey, Commented Oct 22, 2012 at 17:34
I use JSPerf regularly but I haven't thought of a way to implement this appropriately on there. You're right for pointing out it's a great resource. @MikeMcCaughan If simply hitting refresh on the document it makes a huge difference, I quickly caveated that this must only be done with caching disabled or in a fresh environment. — i_like_robots
– i_like_robots, Commented Oct 22, 2012 at 17:59
@i_like_robots; Here I'm referring to the JavaScript engine caching compiled versions of the code, not to browser page caching. See the following answer for a much better overview: stackoverflow.com/questions/1096907/… — Heretic Monkey
– Heretic Monkey, Commented Oct 22, 2012 at 18:10

i_like_robots · Accepted Answer · 2012-10-23 09:03:10Z

1

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

answered Oct 23, 2012 at 9:03

i_like_robots

2,7872 gold badges20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

topcat3 · Accepted Answer · 2012-10-22 16:15:48Z

0

This may be of help!

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

answered Oct 22, 2012 at 16:15

topcat3

2,6706 gold badges36 silver badges58 bronze badges

Comments

tobspr · Accepted Answer · 2012-10-22 16:17:56Z

0

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.");

answered Oct 22, 2012 at 16:17

tobspr

8,4265 gold badges36 silver badges48 bronze badges

1 Comment

i_like_robots Over a year ago

I'm not sure how this is different to what I am already doing, the getTime() method already returns milliseconds. But thank you for pointing out the getMilliseconds() method, it might be useful.

Bergi · Accepted Answer · 2012-10-23 09:19:07Z

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.

Rounin · Accepted Answer · 2022-12-22 00:21:13Z

This answer is from 10 years in the future.

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

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

and:

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>

Collectives™ on Stack Overflow

JavaScript browser parsing speed testing

5 Answers 5

Comments

Comments

1 Comment

Comments

Using `Performance`:

Working Example:

Further Reading:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Using Performance:

Working Example:

Further Reading:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Using `Performance`: