Question

我知道包含javascript的最佳做法是将所有代码放在单独的.js文件中，并允许浏览器缓存该文件。

但是当我们开始使用许多具有自己的 .js 的jquery插件，并且我们的函数依赖于它们时，仅动态加载js函数和所需的<不是更好吗？ em> .js 当前页面？

如果我只需要一个函数来加载使用脚本标签在html中动态嵌入它而不是用js插件加载整个js，那么在页面中会不会更快？ / p>

换句话说，是不是存在比将单个 .js 保留整个javascript代码更好的做法？

Answer 1

拥有单独的js文件的一个问题是会导致更多的HTTP请求。

雅虎有一个关于加快网站速度的最佳做法指南：http://developer.yahoo.com/performance/rules.html

我相信Google的封闭库有一些用于组合javascript文件和依赖项的东西，但我还没有深入研究它。所以不要引用我：http://code.google.com/closure/library/docs/calcdeps.html

还有一个名为jingo http://code.google.com/p/jingo/的工具，但是我还没有使用它。

Answer 2

乍一看，这似乎是一个好主意，但事实上它实际上会使事情变得更糟。例如，如果一个页面需要插件1,2和3，则文件将构建服务器端，其中包含插件。现在，浏览器转到需要插件2和4的另一个页面。这将导致另一个文件被构建，这个新文件将与第一个文件不同，但它也将包含插件2的代码，因此相同的代码结束下载两次，绕过浏览器已有的版本。

最好将缓存留给浏览器，而不是试图进行二次猜测。但是，有一些方法可以改进。

列表的顶部是使用CDN。如果你使用的插件是相当受欢迎的插件，那么它们很可能是用CDN托管的。如果您链接到CDN托管的插件，那么任何第一次访问您的网站并且碰巧碰到另一个也在同一CDN上使用相同插件的网站的访问者，插件就已经被缓存了。

当然，还有其他一些方法可以加快你的javascript速度。最佳实践包括将所有脚本包含标记放在尽可能靠近文档底部的位置，以便不会阻止页面呈现。您还应该研究延迟初始化。这涉及到任何需要重要设置工作的东西，附加一个极简主义事件处理程序，当触发时它会自行删除并设置真实的事件处理程序。

Answer 3

我在开发期间为每个插件和页面保留单独的文件，但在生产期间，我将所有JavaScript文件合并并缩小为整个站点中均匀加载的单个JS文件。我的Web框架中的主要布局文件（Sinatra）使用部署模式自动生成所有JS文件的脚本标记（按顺序，基于清单文件）或执行缩小并包含单个查询字符串时间戳脚本包含。

每个页面都有一个带有唯一id的正文标记，例如<body id="contact">。

对于那些需要特定于特定页面的脚本，我要么修改选择器以使用正文作为前缀：

$('body#contact form#contact').submit(...);

或（更典型地）我提前保释该页面的onload处理程序：

jQuery(function($){
  if (!$('body#contact').length) return;
  // Do things specific to the contact page here.
});

是的，如果用户从不访问该网页，则包含该网站的一个页面可能只需要的代码（甚至是插件）效率低下。另一方面，在初始加载之后，整个站点的JS已准备好从缓存中滚动。

Answer 4

网络延迟是主要问题。
如果将http调用减少为1，则可以获得响应迅速的页面。

这意味着所有的JS，CSS都捆绑在HTML页面中。
如果你可以忘记IE6 / 7，你可以把图像放到data:image/png;base64

当我们发布新版本的Web应用程序时，shell脚本会缩小并将所有内容捆绑到一个html页面中。然后是第二次调用数据，我们使用JS模板库渲染所有HTML客户端：PURE

确保页面已缓存并进行gzip压缩。可能需要考虑大小限制。
我们尝试解压缩400kb以下，并在需要时加载辅助资源。

Answer 5

您还可以尝试http://www.blaze.io之类的服务。它自动执行大多数前端优化策略，并在CDN中耦合。

目前有私人测试版，但值得提交您的网站。

Answer 6

我建议您将常用的功能部分加入到单独的javascript模块文件中，并使用RequireJS / head.js或类似的依赖关系管理工具将它们加载到正在使用的页面中。

您在网站的不同部分使用lighbox弹出窗口，联系表单，跟踪和图像滑块的示例是将这些模块分成4个模块，并仅在需要时加载它们。这样，您可以优化缓存并确保您的网站没有不必要的松弛。

作为一般规则，它总是最好拥有更少的文件，它对于处理每个JS文件的时间也很重要，因为在页面完成加载之前需要一些文件，而某些AFTER（即，当用户点击某些内容时）

在文章中查看更多提示：25 Techniques for Javascript Performance Optimization。

包括有关管理Javascript文件依赖关系的部分。

干杯，希望这很有用。

Javascript和网站加载时间优化

6 个答案: