需要时调用函数

Question

因此，在我的页面中，我有一些小脚本，一旦您访问该站点，我就不需要加载它们，实际上用户在整个会话中可能根本不需要它们。

另外，根据这个：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 中，那么它在大多数情况下都无法执行。所以我想为每个 sn-p 做单独的功能。

例如：

function snippet1() {
   // Code here
}

然后当我需要该 sn-p 时，我会在需要时通过鼠标单击加载它。 （并不总是鼠标点击，取决于我需要加载什么）。

例如：

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

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

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

Answer 1

是的，您应该尽可能在document.ready 包装器之外定义对象、函数等。一些开发人员将绝对定义包装器之外的所有内容，然后在包装器内调用init() 函数来加载其他所有内容。我就是这样的开发者。

至于异步，这并不能真正进行异步加载，但它会加快您的页面速度，因为在页面加载方面要做的工作要少得多。

一般来说，如果您不使用像 requireJS 或 yepnope 这样的脚本加载器，最好将所有脚本引用（或至少那些不需要立即运行的引用）放在您的末尾正文，以便页面在页面加载之后才会运行的资源之前呈现。

Answer 2

我会使用 RequireJS (http://requirejs.org/) 或类似库加载所有其他资源。

将不需要的所有内容立即分开脚本并在加载主要内容后加载。

Answer 3

你混合了几件事：

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

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

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

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

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

最后一部分是执行时间。这些仅在完全调用函数并且它们执行很多操作时才相关。在你的情况下，我想你可以忽略这一点。