优化JavaScript加载的最佳实践

Question

我已阅读了一些关于优化JavaScript加载的文章。 我得到的几个关键点是尽量减少脚本文件（http请求）的数量，缩小并在服务器上启用gzip。目前，我所做的是所有的JavaScript文件都被缩小了，并且gzip也可以被简单地启用。

第1部分）

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

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

解决方案2，当需要一个需要的函数时，延迟加载，我真的不知道这是如何工作的，但它似乎是一种方法，但仍然需要更多的http请求。我很想听听有关这方面的任何投入。

第2部分）

我工作的Web应用程序将被部署到许多其他计算机，因为JavaScript的是非常小的，它是一个很好的做法，使一个脚本，从中央动态加载最新的脚本服务器，以便每个客户端都能运行最新的脚本？

Answer 1

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

• 解决方案1是有效的，并且有工具可以做到这一点，包括Google's Closure Compiler。问题是，在大多数情况下，为了正常工作，需要包含您网站上的每一个脚本，因此无论您的网页可能使用什么，它都会获得一切
• 解决方案2也是有效的，但正如您所说的那样，实际上阻​​止了多个http请求。但它的优点在于它只在需要时加载所需内容，并且在初始页面加载时不会创建任何阻止调用。 Head.js是一个提到的选项，以及Require.js和其他。

2部分：

• 有办法强制浏览器总是下载最新的JavaScript文件，尽管这种否定浏览器缓存的好处。一种常见的方法是在JavaScript URL的末尾添加get变量，即“domain.com/index.js?timestamp=_123123123”。这与jQuery在为其ajax调用关闭缓存时所做的相似。

Answer 2

一般的最佳做法被认为是

1. 合并后的文件尽可能

2. 缩减大小

3. 即成gzip压缩

4. 即成尽可能晚的（一些可能需要处于首位，但通常在首选之前或异步首选

这是一般性建议，您需要执行此操作并进行测试以确保它适合您的情况。

尽量减少HTTP请求是很重要的，延迟是一个性能杀手......

Answer 3

你必须打破优化成几个步骤

1. 优化源代码：有良好做法写出具有较少的DOM开销，产生更少的变量和DOM元素在内存中，高效循环JS代码，等等。这些通常不能通过脚本编译器进行优化。
2. 缩减大小：这有两个解决方案
   • 合并成一个文件，并缩小（使用谷歌的关闭编译器，Uglify）
   • 缩减大小的每个文件，然后延迟加载。我个人喜欢用AMD模块化模式来定义我的模块。您可以使用启动文件选择编译为一个文件或保留模块结构和延迟加载，但每个模块都会被缩小。
3. 服务器优化
   • 请问您的服务器成为压缩的javascript？
   • 尝试尽可能使用<script src='//...' async defer>，如果您有脚本依赖性，请在使用asycn加载时小心。如果你使用AMD模块，它将确保你的依赖模块被预先加载，并且它们每个页面只刷新一次。
   • 使用CDN服务您的静态内容，存储内容分发网络