Javascript与网站加载时间优化

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

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

在一个页面中，如果我只需要一个函数，就可以通过脚本标记将其动态嵌入到html中，而不是通过js插件加载整个js，那么这不是更快吗

---

换句话说，没有比将整个javascript代码保存在单独的.js中更好的实践了吗？

使用单独的js文件会导致更多的HTTP请求

Yahoo有一个关于加速网站的最佳实践指南：

我相信Google的闭包库有一些东西可以将javascript文件和依赖项结合起来，但我还没有对此做太多研究。所以不要引用我的话：

---

还有一个叫做jingo的工具，但我还没用过。

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

您最好将缓存留给浏览器，而不是试图猜测它。然而，也有改进的办法

最重要的是使用CDN。如果您使用的插件相当流行，那么它们很可能是由CDN托管的。如果你链接到CDN托管的插件，那么任何第一次访问你的站点并且碰巧访问了另一个同样使用同一CDN相同插件的站点的访问者，插件都将被缓存

---

当然，还有其他一些事情可以加快javascript的速度。最佳实践包括将所有脚本包含标记放置在尽可能靠近文档底部的位置，以避免阻碍页面呈现。您还应该研究惰性初始化。这涉及到，对于任何需要大量设置才能工作的东西，附加一个最低限度的事件处理程序，当被触发时，它将删除自身并设置真正的事件处理程序

在开发过程中，我为每个插件和页面保留单独的文件，但在生产过程中，我将所有JavaScript文件合并并缩小为单个JS文件，在整个站点中统一加载。My web framework（）中的主布局文件使用部署模式自动为所有JS文件生成脚本标记（按顺序，基于清单文件），或执行缩小并包含单个querystring时间戳脚本

每个页面都有一个带有唯一

id

的正文标签，例如

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

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

或者（更典型地）我有该页面的onload处理程序：

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

---

是的，如果用户从未访问过该页面，那么包含一个页面可能只需要的代码（甚至插件）是低效的。另一方面，在初始加载之后，整个站点的JS就可以从缓存中滚动了。

网络延迟是主要问题。
如果您将http调用减少到一个，您可以获得响应速度非常快的页面

这意味着所有的JS、CSS都被捆绑到HTML页面中。
如果你忘记了IE6/7，你可以将图像作为

data:image/png；base64

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

---

确保页面已缓存和gzip。可能要考虑一个大小的限制。
我们尝试保持在4KB以下的解压缩，并且在需要的时候加载次要资源。

你也可以尝试类似的服务。它会自动形成大多数前端优化策略，并耦合到CDN中

---

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

我建议您将常见的功能加入到单个javascript模块文件中，并仅在使用/或类似依赖关系管理工具使用的页面中加载它们

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

作为一般规则，最好是文件少而不是文件多，确定每个JS文件的时间也很重要，因为有些是在页面完成加载之前需要的，有些是在页面完成加载之后需要的（即，当用户单击某个文件时）

请参阅文章中的更多提示：

包括一节关于管理Javascript文件依赖项的内容

干杯，希望这是有用的