How do browsers handle JavaScript?

Question

How does a web browser handle the JavaScript content of a webpage? Is the JavaScript content being parsed into a DOM and then rendered?

I do not need a specification, but I need to know how it is done. Please tell me the whole process of handling JavaScript content on a web page.

Answer 1

The script sections of a web page are handled by the browser's JavaScript interpreter, which may be an intrinsic part of the browser but usually is a distinct module, sometimes even a completely distinct project (Chrome uses V8; IE uses JScript; Firefox uses SpiderMonkey; etc.).

When the HTML parser reaches a script element, all that the parser does is read and store the text through the ending </script> tag (or retrieve the file referenced via the src attribute). Then, unless the author has used the defer or async attributes, all HTML parsing and rendering comes to a screeching halt and the HTML parser hands the script text off to the JavaScript interpreter. The JavaScript interpreter interprets the JavaScript code in the context of the window object, and when done returns to the HTML parser, which can then continue parsing and displaying the page. This stop-everything-and-run-the-JavaScript is why some prominent people recommend putting scripts at the bottom of the page to improve the perceived load time. It also means that script tags are processed in order, which can be important if one script relies on another. If the defer or async attribute is used, script execution can be deferred until later on browsers that support it. All scripts on the page are executed within the same global execution context, sharing the same global namespace and memory area (and thus can interact with one another).

Once the page is parsed and rendered, a variety of events can occur — the user can click something, the browser window can be resized, the mouse can move over elements. JavaScript code that was run as a result of being in a script tag can "hook into" these events, requesting that the browser call a function in the JavaScript when the event occurs. This allows JavaScript to be interactive — the user clicks an element on the page, for instance, and the browser tells the JavaScript interpreter that it should run function X in the JavaScript code.

As you can see above, there are two somewhat different situations in which JavaScript code can be run: During the page parsing/rendering process (when a script element that does not use the defer or async attributes is being initially processed), and after the parsing/rendering process (deferred scripts, and code running in response to an event). JavaScript running during the parsing/rendering process can directly output content to the HTML parser via the document.write function. JavaScript running after the parsing/rendering is complete can't do that, of course, but can use the very powerful DOM HTML API to interact with the DOM.

It's probably worth noting the noscript element: In a browser with JavaScript enabled, noscript elements are completely skipped. In a browser without JavaScript or with JavaScript disabled, the script elements are completely skipped and the noscript elements are read instead. This makes it easy to include content that will be shown only if JavaScript is, or is not, enabled on the browser when the page is rendered.

Recommended reading:

• http://en.wikipedia.org/wiki/Client-side_JavaScript
• http://www.w3.org/TR/html5/scripting-1.html
• http://www.ecma-international.org/publications/standards/Ecma-262.htm