需要时调用函数

Question

所以在我的页面中,我有一些小脚本,一旦你访问网站我真的不需要加载,实际上用户可能在整个会话中根本不需要它们.

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

所以,例如,目前我在'当dom ready'时已经拥有了所有内容:

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

如果我不将代码放在Dom中,那么它在大多数情况下都不可执行.所以我想为每个片段做单独的功能.

例如:

function snippet1() {
   // Code here
}

然后当我需要那个片段时,我需要用鼠标点击它加载它.(并不总是一个mouselcick,取决于我需要加载).

例如:

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

所以我的问题是:这是加载函数异步的方式,所以你减少页面加载时间或有更好的方法吗？ 我没有在我的例子中读到这个,我只是想到了它.

请注意,我知道asynch加载,但这不是我的选择,因为我可以将所有函数组合在一个将被缓存的js文件中,因此页面加载时间将小于每次asynch js文件时加载.

Answer 1

你混合了几件事:

1. 页面加载时间
2. JavaScript解析时间 - 加载脚本后,必须对其进行解析(错误检查,编译为字节代码等)
3. 功能执行时间

由于您不想拆分脚本,因此无法对页面加载时间做很多事情.您可以考虑将其分为两部分:一部分是您总是需要的部分,另一部分是很少需要的"可选"部分.在后台加载罕见功能.

请注意,在访问过一次站点并确保浏览器可以缓存文件后,页面加载时间变得非常糟糕.

如果要减少解析时间,您有两种选择:

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

最后一部分是执行时间.这些仅在函数被调用时以及它们执行很多时才有意义.在你的情况下,我想你可以忽略这一点.