javascript - 需要时调用函数

Question

所以在我的页面中我有一些小脚本，一旦您访问该站点我真的不需要加载它们，事实上用户可能在整个 session 期间根本不需要它们。

另外，根据这个:http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJS这也不是一个好习惯。

例如，目前我在'When dom ready'中拥有所有内容:

$(function() {
 // most of the code of which is not needed
});

如果我不将代码放入 Dom 中，它在大多数情况下是不可执行的。所以我想为每个片段做单独的功能。

例如:

function snippet1() {
   // Code here
}

然后当我需要该片段时，我会在需要时使用鼠标单击加载它。 (并不总是鼠标点击，取决于我需要加载什么)。

例如:

$('#button1').click(function() {
  snippet1();
});

所以我的问题是:这是异步加载函数的方式，这样可以减少页面加载时间，还是有更好的方法？我没有在我的示例中的任何地方读过这个，我只是想到了.

请注意，我知道异步加载，但这不是我的选择，因为我可以将所有功能组合在一个将被缓存的 js 文件中，因此页面加载时间将少于每次加载异步 js文件。

Answer 1

你正在混合几样东西:

1. 页面加载时间
2. JavaScript 解析时间——加载脚本后，必须对其进行解析(错误检查、编译为字节码等)
3. 函数执行时间

您不能对页面加载时间做太多事情，因为您不想拆分脚本。您可以考虑将它分成两部分:一个您总是需要的部分和一个很少需要的“可选”部分。在后台加载稀有函数。

请注意，在网站被访问一次并且您已确保浏览器可以缓存文件后，页面加载时间变得毫无意义。

如果你想减少解析时间，你有两个选择:

1. 不要加载不需要的部件。
2. 压缩脚本。 Google 有一个很棒的工具:Closure Compiler .除了使您的脚本更快之外，它还会检查许多常见错误。

最后一部分是执行时间。只有当函数被调用并且它们做了很多事情时，这些才是相关的。对于您的情况，我想您可以忽略这一点。