异步加载 JavaScript 函数。答案

【问题标题】：Asynchronous loading JavaScript functions.异步加载 JavaScript 函数。
【发布时间】：2013-10-02 06:24:04
【问题描述】：

我正在构建一个框架，其中我将所有 JavaScript 文件合并到一个文件中（缩小）。

例子：

   function A() {} function B() {}

通过缩小文件，我想异步加载函数并在其工作完成后从 HTML 中删除。

示例：在需要时加载函数 A，而不是函数 B。

我见过一个框架 Require.js，但它会根据需求异步加载 JavaScript 文件。

是否有任何框架可以按需加载在同一个 js 文件中定义的 JavaScript 函数。

【问题讨论】：

加载单个函数实际上是一种反优化。您正在通过牺牲网络负载（每个函数导致浏览器打开另一个到服务器的套接字）来优化内存占用和编译时间（通常不是严重的瓶颈），这是 Web 应用程序的主要瓶颈。

标签： javascript performance requirejs commonjs

【解决方案1】：

串联的缺点是您无法对在给定页面加载中包含的内容进行细粒度控制。对此的解决方案是，与其创建一个级联文件，不如创建层的功能，这些功能可以更模块化地包含在内。因此，您不需要将所有 JS 放在可能只使用一些特定功能的页面上。这实际上也可以在速度上取得胜利，因为只有一个 JS 文件可能无法利用浏览器的 6 个并发连接。此外，一旦 SPDY 被完全采用，一个大文件的性能实际上将低于更多的小文件（因为可以重用连接）。但是，缩小仍然很重要。

话虽如此，您似乎在要求一些难以实现的东西。当浏览器加载脚本时，它会立即被解析并执行。然后您无法加载文件...仅加载文件的一部分。通过连接，您将自己限制在如此大的负载中。

可以通过将脚本包装在块注释中来延迟执行，然后从脚本节点访问它并eval()ing ......但这似乎不像你问的那样。不过，如果您想在不锁定 UI 的情况下预加载模块，这可能是一个有用的策略。

【讨论】：

我在你的回答中得到了一个解决方案，通过在不同的文件中分别缩小所有类，我可以使用 requirejs 。执行此代码也将被缩小，我可以使用 require js 根据需求加载类。非常感谢 Wyatt 的建议。
是的，缩小只是减少了通过网络发送的字节数，所以无论你有多少文件，你都会得到速度提升。很高兴我能帮上忙。

【解决方案2】：

这不是 javascript 的工作方式。加载函数的源文件时，该函数在内存中可用。由于语言是解释性的，因此一旦浏览器读取源文件，就会加载定义的函数。

如果你想有明确的依赖链，最好的办法是使用 Require.js 或类似的东西。

【讨论】：