JavaScript performance

JavaScript
1

I’m puzzeled with a very simple Javascript performance test.
Code for two web pages:
PAGE 1

<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>PAGE 1</title>

<script>
for (var i=0; i<=1000000000; i++) {
	var g = i;
}
</script>

<style>
p { color: red; }
</style>
</head>

<body>
<p>Some text</p>
</body>
</html>

PAGE 2

<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>PAGE 2</title>
<style>
p { color: red; }
</style>
</head>

<body>
<p>Some text</p>

<script>
for (var i=0; i<=1000000000; i++) {
	var g = i;
}
</script>

</body>
</html>

Why does the display time for the red paragraph are the same in both pages?
Shouldn’t PAGE 2 display the red paragraph faster?

2

Cos the count is going on separately from the page rendering?
The javascript does nothing to the dom, it just sits counting in the background.

why not make it write something to the page when the count finishes? Then you’ll see which page has a faster rendering to the end result.

3

Dr John is right there, the test doesn’t actually do anything except assign a variable. (I’d also suggest you take a few zeros away ;)). How this behaves depends on the browser as well I believe.

If you want to see how long the operation actually takes, it would be quite trivial to modify this snippet so it will tell you:


var start, end, g, i;
start = new Date().getTime();

for (i=0; i<1000000; i++) {
  g = i;
}

end = new Date().getTime();
console.log("Test took:", (end-start)/1000 + "s");

Now your test result will be logged to the developer console (but you could alert it, write it to the page, do something else with it).

If you want to write some more JS performance tests I’d recommend going to jsperf.com and searching for use cases or create your own. Writing the tests is fairly easy.

4

Thanks Dr John and AussieJohn.
Maybe due my poor english I put a lot of confusion in my question.
I know how to measure how long a Javascript operation takes and also the JSPerf interface.
The question is:
If scripts located before the body’s close tag do not block the page
loading why does the PAGE2 doesn’t shows the paragraph faster than PAGE1?
What am I missing?

5

Are you talking about putting scripts at the bottom of the page to prevent the JavaScript from being executed before the rest of the page loads? Or are you specifically interested in working out how/why elements on the page get rendered based on a script that takes a long time to execute (in either the head or the body region).

If it’s the first, then the reason you would put scripts at the bottom is so that the browser gets to load the CSS and HTML first, so that there is something on the screen before the JavaScript get loaded. Normally when the JS is placed in the head it will block other downloads until it is done loading and executing. It’s also worth noting that we’re talking about external resources here, so inline scripts will execute and in most circumstances won’t block the page from being rendered and should not block other external downloads.

6

Great AussieJohn this is the point.
So, why does there is nothing on the Page 2 (the red paragraph) before the Javascript loop get executed?

7

Ah that’s the trick when you have scripts that take a long time to execute (For example when they loop 1000000000 times ;)). The script can still prevent the browser from taking any other actions if it is doing something very processor intensive that takes a long time.

8

[SOLVED] :slight_smile:
Thanks AussieJohn for take your time, your kindness and be patient.
Regards