在需要时调用函数

因此，在我的页面中，我有一些小脚本，一旦您访问该网站，我实际上并不需要加载这些脚本，实际上用户在他们的整个会话中可能完全不需要它们。在需要时调用函数

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

因此，例如，目前我有一切“当DOM准备”：

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

如果我不代码放在里面的DOM已准备就绪，在大部分的时间它不是可执行文件。所以我想为每个片段做独立的功能。

对于〔实施例：

function snippet1() { 
    // Code here 
}

，然后当我需要一个片断，我需要用的时候点击鼠标加载它。（不总是一个鼠标，取决于我需要加载）。

例如：

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

所以我的问题是：这是加载功能，异步，所以你减少网页加载时间或是否有更好的方式呢？我没有看过我的例子，我只是想到了它。

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

来源

2012-01-13 jQuerybeast

你混几件事情：

页面加载时间
JavaScript脚本时间 - 脚本被加载后，它必须被解析（检查错误，编译成字节码等）
功能执行时间

，因为你不希望分裂脚本你不能做太多关于页面加载时间。您可能会考虑将其分为两部分：您始终需要的部分和很少需要的“可选”部分。在后台加载罕见功能。该网站已被访问过一次之后

注意，页面加载时间变得很没有实际意义和您所做确保浏览器能够缓存文件。

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

，你不需要不要加载零件。
压缩的脚本。谷歌有一个很好的工具：Closure Compiler。除了让脚本更快，它还会检查许多常见的错误。

最后一部分是执行时间。只有当这些功能被调用并且它们执行了很多操作时，这些才是相关的。在你的情况下，我想你可以忽略这一点。

来源

2012-01-13 14:23:55

嗨，谢谢你的回答。我知道所有的方法来最小化和减少加载时间。剩下的是解析时间。我的所有脚本都是异步加载，缩小，缓存在Akamai的CDN等等上。它只是我沉迷于加载时间和性能的人之一，我只是想尽一切办法。在所有的网页加载脚本在线（网页测试，yslow，谷歌的网页速度，我得到100/100或完整的A，我不慌张，我只是想解释说我知道很多东西）。我的实际页面甚至使用缓存清单。 – jQuerybeast 2012-01-13 14:30:39

我只是想了解是否有更好的做法，我不知道。 – jQuerybeast 2012-01-13 14:30:51

在这种情况下，您唯一的选择是分割脚本。由于浏览器将缓存它们，因此如果仅在2-3分割它们，这不会影响加载时间。事实上，这可能会有所帮助，因为未来的更改可能只会影响2/3脚本中的一个，所以浏览器不必重新加载所有内容。 – 2012-01-13 14:50:02

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

至于异步，这不会执行真正的异步加载，但它会加快您的页面，因为页面加载的工作量要少得多。

通常，如果您不使用像requireJS或yepnope这样的脚本加载器，最好在所有脚本引用（或者至少不需要立即运行的脚本引用）你的身体，所以页面呈现之前，资源将不会运行，直到页面加载后。

来源

2012-01-13 14:22:04 glortho

谢谢。听起来很好的建议。有没有关于它的文章？ – jQuerybeast 2012-01-13 14:26:35

看看这个SO发布和答案，其中包括一个链接到雅虎的开创性最佳实践文章：http://stackoverflow.com/questions/143486/unobtrusive-javascript-script-at-the-top-or-the-bottom- of-the-html-code – glortho 2012-01-13 14:44:04

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

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

来源

2012-01-13 14:22:27

为什么我自己可以加载整个插件？ – jQuerybeast 2012-01-13 14:25:31

这是非常小，经过充分测试。它也会节省你的时间。 – 2012-01-13 14:32:33

在需要时调用函数

回答

相关问题