浏览器是否将所有内容读/存储在Javascript文件中或仅将它们存储在所需文件中？

Question

Here's what I'm asking:

Suppose I have on my site

<script type="text/javascript" src="global.js"></script>
<script type="text/javascript">
    someFunction();
    someOtherFunction();
</script>

and suppose someFunction and someOtherFunction are the only functions used on the page and are 2 of 10,000 functions in global.js . Clearly the browser would be better off in this situation looking only for those 2 functions in global.js and skipping everything that doesn't depend on them, but which of the following ways is actually how the browser parses JS?

1. JS engine takes every function definition it comes across and makes it into machine code and then uses it if it ever needs to
2. JS engine looks for use of functions and then looks for their definitions and builds machine code and uses the function whenever needed (including the use case it found)

Answer 1

1.

<script type="text/javascript" src="global.js"></script>

Load entire text source of global.js into memory. Parse and execute any JavaScript code there in the current global environment.

2.

 <script type="text/javascript"> someFunction(); someOtherFunction(); </script> 

Look in the current global environment for the function named someFunction() and call it. Next look in the current global environment for the function named someOtherFunction() and call it. Has absolutely no clue about where or how they were defined.

---

All in all, browsers will take the entire file and parse and execute all of the contained code there up front because that is the design of the language. It will not look forward or "compile" all of the JavaScript code in a page at once.

Answer 2

This is a great question!

As an answer to your question, #1 is the most correct, as indeed all functions are parsed by the interpreter during script load, rather than just those referenced by your containing script.

First off, as soon as the include statement executes the entire JS file is loaded into the client's browser cache. At that point global.js is parsed , interpreted and executed by your browser's Javascript engine. Any global functions and variables declared in global.js will then be able to be used by the containing script.

It is important to note, however, that no Javascript is ever compiled into machine code, rather it is lexically parsed and interpreted according to ECMA standards.

---

For more information on script loading, check out this great resource on html5rocks: Script Loading