优化JavaScript加载的最佳实践

Question

我在网上读了一些有关优化JavaScript加载的文章。其中一些关键点是尽量减少脚本文件（HTTP请求）的数量，对服务器进行压缩和启用gzip。目前，在我的站点上所做的是所有JavaScript文件都经过了缩小，并且可以很容易地启用gzip。

第一部分)

我的问题是我有大约20个JavaScript文件，其中一个common.js包含所有核心函数。除此之外，每个页面至少需要加载一个其他文件来实现该页面的功能。

解决方案1是将所有脚本组合成一个大的脚本文件，并为每个客户端加载一次，这似乎是其他人正在做的事情。我想YUI或JSMin可以用于压缩，所以我应该手动合并文件吗？

解决方案2是懒加载，当需要所需功能时才加载，我不太清楚这是如何工作的，但它似乎是一种方法，尽管仍需要更多的HTTP请求。我很乐意听取任何相关意见。

第二部分)

我正在开发的Web应用程序将部署到许多其他计算机上，由于JavaScript很小，因此是否值得制作一个动态加载最新脚本的脚本，以便每个客户端都运行最新版本的脚本呢？

- y62wang

---

考虑使用 http://headjs.com/。 - Matt Ball

在将大部分页面所需的主要脚本连接起来后，我会异步加载其他脚本。https://gist.github.com/896561。如果您需要回调，则使用async和defer或将它们内联服务（这是我所做的）。 - Jonathan Ong

Answer 1

一般最佳实践是：

1. 尽可能将文件合并为较少的文件

2. 压缩文件大小

3. 使用gzip压缩传输

4. 尽可能晚地传输文件（有些文件可能需要在头部，但通常在``标签之前或异步方式传输更好）

这是一般建议，您需要执行并测试以确保其适用于您的情况。

最小化HTTP请求非常重要，延迟会导致性能下降。

- Andy Davies

Answer 2

第一部分：就像你说的那样，有两种方法。

• 方案1是有效的，也有工具可以做到这一点，包括Google的Closure编译器。问题在于，在大多数情况下，为了正常工作，它需要网站上的每个脚本都被包含进去，因此无论你的页面使用什么，它都会包含全部。
• 方案2也是有效的，但就像你所说，并不能真正防止多个http请求。但好处是它只在你需要时加载你需要的内容，并且不会在初始页面加载时创建任何阻塞调用。Head.js是一个已经提到的选项，还有Require.js和其他一些。

第二部分：

• 有办法强制浏览器始终下载最新的javascript文件，虽然这有点抵消了浏览器缓存的好处。一个常见的方法是在javascript URL的末尾添加一个get变量，例如“domain.com/index.js?timestamp=_123123123”。这类似于当你关闭jQuery ajax调用的缓存时所做的操作。

- RTigger

Answer 3

你需要将优化分成几个步骤。

优化源代码：有一些良好的实践方法来编写JS代码，减少DOM开销，在内存中创建更少的变量和DOM元素，使用高效的循环等等。通常这些不能通过脚本编译器进行优化。

压缩：有两种解决方案 1. 合并为一个文件并进行压缩（使用Google的Closure Compiler、Uglify等工具）。 2. 对每个文件进行压缩，然后进行懒加载。我个人喜欢使用AMD模块化模式来定义我的模块。你可以使用引导文件来选择将其编译为一个文件或保留模块结构和懒加载，但每个模块也会被压缩。

服务器优化： 1. 你的服务器是否提供gzip压缩的JavaScript？ 2. 尽可能使用<script src='//...' async defer>，如果你有脚本依赖，请小心使用异步加载。如果你使用AMD模块，则它将确保你的依赖模块提前加载，并且它们只在页面刷新时加载一次。 3. 使用CDN来提供你的静态内容，在内容交付网络上存储你的图片、文件、JavaScript等。

- activars