JavaScript performance

**Maujor** · Oct 19, 2012 16:17

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

Code:

<!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

Code:

<!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?

**Dr John** · Oct 19, 2012 16:28

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.

**AussieJohn** · Oct 19, 2012 17:11

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:

Code JavaScript:

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.

**Maujor** · Oct 19, 2012 19:03

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?

**AussieJohn** · Oct 19, 2012 19:34

Originally Posted by Maujor

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?

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.

**Maujor** · Oct 19, 2012 19:57

Originally Posted by AussieJohn

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.

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?

**AussieJohn** · Oct 19, 2012 20:03

Originally Posted by Maujor

Great AussieJohn this is the point.
So, why does there is nothing on the page (the red paragraph) before the Javascript for loop ends run?

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.

**Maujor** · Oct 19, 2012 20:16

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

User Tag List

Thread: JavaScript performance

Thread Tools

Display

JavaScript performance

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions