浏览器是读取/存储 Javascript 文件中的所有内容还是只读取它们需要的内容？答案

【问题标题】：Do browsers read/store everything in a Javascript file or only the stuff they need?浏览器是读取/存储 Javascript 文件中的所有内容还是只读取它们需要的内容？
【发布时间】：2015-11-12 07:30:35
【问题描述】：

这就是我要问的：

假设我的网站上有

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

并假设 someFunction 和 someOtherFunction 是页面上使用的唯一函数，并且是 global.js 中 10,000 个函数中的 2 个。显然，在这种情况下浏览器会更好地只寻找global.js 中的这两个函数并跳过不依赖它们的所有内容，但以下哪种方式实际上是浏览器解析 JS 的方式？

JS 引擎将遇到的每个函数定义都转换为机器代码，然后在需要时使用它
JS 引擎查找函数的使用，然后查找它们的定义并构建机器代码并在需要时使用函数（包括它找到的用例）

【问题讨论】：

整个文件被解析
1 和 2 似乎是几乎相同的过程？
@guest271314 2 意味着只解析使用的函数looks for use of
@JaromandaX 什么是“使用”？所有包含的文本都有“使用”的潜力？ “如果需要的话”~“需要时”
浏览器解释 JS 代码。它没有编译成机器命令。

标签： javascript html optimization browser

【解决方案1】：

这是一个很好的问题！

作为对您问题的回答，#1 是最正确的，因为实际上所有函数都在脚本加载期间由解释器解析，而不仅仅是包含脚本所引用的函数。

首先，一旦 include 语句执行，整个 JS 文件就会被加载到客户端的浏览器缓存中。此时 global.js 由您的浏览器的 Javascript 引擎解析、解释和执行。在 global.js 中声明的任何全局函数和变量都可以被包含的脚本使用。

然而，重要的是要注意，没有任何 Javascript 被编译成机器代码，而是根据 ECMA 标准进行词法解析和解释。

有关脚本加载的更多信息，请查看 html5rocks 上的这个优秀资源：Script Loading

【讨论】：

它没有被转换成机器码。这几乎违反了沙盒的整个原则。
正确，Javascript 是一种解释性语言。已应用编辑。
#2 怎么样？ #2 说 looks for use of functions then looks for their definitions - js 引擎解析函数，无论它们是否为 used
我说它最是正确的，尽管回头看似乎#1 更正确，因为实际上所有函数都是在脚本加载期间由解释器解析的。我想我的意思是把 #1 代替，谢谢你引起我的注意:)

【解决方案2】：

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

将 global.js 的整个文本源加载到内存中。在当前全局环境中解析并执行任何 JavaScript 代码。

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

在当前全局环境中查找名为someFunction() 的函数并调用它。接下来在当前全局环境中查找名为someOtherFunction() 的函数并调用它。完全不知道它们是在哪里或如何定义的。

总而言之，浏览器将获取整个文件并解析并预先执行其中包含的所有代码，因为这是语言的设计。它不会一次向前看或“编译”页面中的所有 JavaScript 代码。

【讨论】：

“总而言之，浏览器会获取整个文件，并预先解析并执行所有包含的代码” 可能的异常stackoverflow.com/questions/33621475/… ?
@guest271314- 如果您更改脚本的加载方式，“预先”部分的措辞可能会更好，但一旦脚本加载，它将立即解析并执行。例如，将脚本设置为延迟会导致文件加载延迟。
“并执行所有包含的代码” 是注意到的部分，在这里。不评论这是否正确，只是绝对同步或感知同步过程可能存在例外
他们并不是真正的例外。它是同步的。故意延迟该过程将成为一项功能。例如，类似于从 ajax 加载的脚本。