Why does this while loop freeze my page?

var f = 5, d;

while (f === 5) d = 2;

alert(d);

Why does this freeze my page. I thought only when the page is doing a document.write, alert, or console.log inside a while loop (without a incremented value with a limit) it will freeze the page, but开发者_开发知识库 not with variables... Do I still have to have a var i = 0; while (i < 5 &&... just to get this to work?

EDIT: I found this in the source-code of google. This while loop doesn't have a number limit but it doesn't freeze the page:

while (a && !(a.getAttribute && (b = a.getAttribute("eid")))) a = a.parentNode;

The Google loop you edited into your question is testing the value of a in the while condition and it is modifying the value of a inside the loop, so the loop will terminate when a (or one of the other conditions based on a) is no longer truthy.

while (a && !(a.getAttribute && (b = a.getAttribute("eid")))) a = a.parentNode;

For a loop to terminate, some value that you are testing in the loop condition must change to a falsey value sometime during the iteration of the loop. It doesn't have to be numbers, it can be other things that have a truthy or falsey notion to them.

In that Google loop, there are two conditions that can make it terminate:

1. a is no longer truthy (null, undefined, 0, false, etc...).
2. a.getAttribute("eid") exists.

So, basically this is going up the parent chain looking for the first parent that has getAttribute("eid"). It stops either when it runs out of parents to check or it finds a parent with that attribute.

because f === 5 is true, and you never change f (inside your loop), so your loop never stops.

Your loop does repeatedly set d = 2, but that doesn't change f. So your loop continually sets d as fast as it can. It would be as if you did while(true) {...}.

There is only a single thread for the page. If your javascript never ends, it never lets anything else use the thread.

EDIT: To answer your edited question:

while (a && !(a.getAttribute && (b = a.getAttribute("eid")))) a = a.parentNode;

The important part here is a = a.parentNode. Each iteration of the loop will have a different value for a. It is basically traversing up the DOM. It will keep traversing up the DOM tree until either a has no parent or it finds an element with an eid attribute.

You set f to 5.

Then, as long as f is 5, you set d to 2.

This will continue forever, since f will forever be 5. You do not change f.

It's an infinite loop - the loop never exits! You need to do something to make the loop condition terminate, something like this is customary:

$counter = 0;
while ($counter++ < 10) {
    // do something
}
alert('loop is finished!');

As for: while (a && !(a.getAttribute && (b = a.getAttribute("eid")))) a = a.parentNode;

variable a is changing inside the loop - always moving up the parent node until it runs out of parent elements. So eventually the loop terminates. Not so in your code.

Because your while expression always evaluates to true, it tries to execute the loop and never stops because f never changes.

Simply because the page is always "frozen" when any Javascript code is executing. What you heard about document.write is incorrect. Javascript is run in a single thread, and all current browsers block user interaction with the page as long as the Javascript thread is working.

The google code snippet you included modifies the variable a. Assuming the parentNode property eventually returns null or another falsy value, the loop will terminate.