0

I have a very basic question about how javascript engine of a browser say chrome executes a javascript file embedded inside the html file. I am assuming, first the html page is rendered and then javascript is executed. My question is that when the engine reaches last line of the js file, what next?. Does all the callback methods of events remain active even after hitting the last line or after last line is hit, everything related to the js file is washed out from memory and js terminates?. Or does the js writer have to take care to put a loop in js file so that the js is functional and the last line is never hit.

grit639
  • 316
  • 1
  • 9
  • 1
    The question has been answered in detail at this link https://stackoverflow.com/questions/28635141/sequence-in-which-html-page-loads – Raky Jun 05 '21 at 06:52
  • @Raky : Thanks for the pointer, but I am still confused. This question's response says: "The first script file finishes download. The browser executes that script. The second script file finishes download. The browser executes that script.". My question is on HOW exactly the browser executes the js script. – grit639 Jun 05 '21 at 07:48
  • 1
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop – Ouroborus Jun 05 '21 at 08:44
  • @Ouroborus : When does the js execution terminate exactly?. isn't it like any other usual programming language that when it hits the last code line or does it terminate only when the next html page gets loaded?. – grit639 Jun 05 '21 at 08:58
  • 1
    It doesn't terminate so long as the page is loaded. The javascript engine maintains and monitors a queue of to-be-executed code. When there's something in the queue, it gets executed. When the queue is empty, is waits for the queue to stop being empty. Page initialization queues up scripts to run. Those scripts can set up various situations where functions get added to the queue later. When navigation occurs, some events are fired, causing more things to be queued. One of those events is to unload the page. During unload, the queue stops being processed and memory is released. – Ouroborus Jun 05 '21 at 09:05
  • @Ouroborus: Thanks!. This raises my next question: when next js in the html is executed, does the javascript engine keeps the first js callbacks/queues/event listeners along with the second one? – grit639 Jun 05 '21 at 09:09
  • 1
    Of course. So long as there's a reference to them somewhere, they're kept around. (That reference doesn't necessarily have to be in your code. For example, the browser keeps internal references to event handler callbacks.) – Ouroborus Jun 05 '21 at 09:13
  • @Ouroborus : What if both first and second js add event listener callback methods for the same event say keystroke, then in what order these callbacks executed, when the event is triggered?. – grit639 Jun 05 '21 at 09:17
  • 1
    That's undefined. Could be any order and can differ from browser to browser. (Though I find they tend to be newest to oldest.) – Ouroborus Jun 05 '21 at 09:20

1 Answers1

1

Does all the callback methods of events remain active even after hitting the last line?

Yes.

does the js writer have to take care to put a loop in js file so that the js is functional and the last line is never hit?

No; in fact such an endless loop would provide a pretty bad user experience.

More generally speaking: it's very easy to try out these things and see for yourself. All you need is a browser and a text editor :-)
(Or even just an in-browser editor like codepen.io or jsfiddle.net or a bunch of others.)

jmrk
  • 34,271
  • 7
  • 59
  • 74