Javascript和网站加载时间优化答案

【问题标题】：Javascript and website loading time optimizationJavascript和网站加载时间优化
【发布时间】：2012-08-10 18:32:08
【问题描述】：

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

但是当我们开始使用很多jquery插件，它们都有自己的.js，而我们的函数依赖于它们时，只动态加载js函数和需要的.js 为当前页面？

如果我只需要一个函数来动态加载并使用 script 标签将其嵌入到 html 中，而不是使用 js 插件加载整个 js，那在页面中会不会更快？

换句话说，有没有比将整个 javascript 代码保存在单独的 .js 中更好的做法的情况？

【问题讨论】：

标签： javascript performance optimization

【解决方案1】：

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

您最好将缓存留给浏览器，而不是试图事后猜测它。但是，有一些选择可以改进。

列表顶部正在使用 CDN。如果您使用的插件相当流行，那么它们很可能是通过 CDN 托管的。如果您链接到 CDN 托管的插件，那么任何第一次访问您的网站并且碰巧访问过另一个使用来自同一 CDN 的相同插件的网站的访问者，这些插件都将被缓存。

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

【讨论】：

【解决方案2】：

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

雅虎有一个关于加速您的网站的最佳实践指南：http://developer.yahoo.com/performance/rules.html

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

还有一个叫jingohttp://code.google.com/p/jingo/的工具，不过我还没用过。

【讨论】：

【解决方案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 就可以从缓存中滚动了。

【讨论】：

【解决方案4】：

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

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

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

确保页面被缓存和压缩。可能需要考虑大小限制。
我们尝试将解压缩后的大小保持在 400kb 以下，并在以后需要时加载辅助资源。

【讨论】：

【解决方案5】：

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

目前处于私人测试阶段，但值得将您的网站提交给。

【讨论】：

【解决方案6】：

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

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

作为一般规则，文件越少越好，处理每个 JS 文件的时间也很重要，因为在页面完成加载之前需要一些文件，而在页面完成加载之后需要一些文件（即，当用户单击某些内容时）

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

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

干杯，希望这有用。

【讨论】：