3

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

另外，根据这个：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 文件时的加载时间。

4

3 回答 3

6

你混合了几件事：

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

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

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

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

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

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

于 2012-01-13T14:23:55.743 回答
1

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

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

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

于 2012-01-13T14:22:04.343 回答
1

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

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

于 2012-01-13T14:22:27.397 回答