优化javascript加载的最佳实践

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

第1部分）

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

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

解决方案2，在需要所需函数时延迟加载，我不知道这是如何工作的，但这似乎是一种方法，尽管仍然需要更多的http请求。我很想听到这方面的任何意见

第2部分）

---

我正在开发的web应用程序将部署到许多其他计算机上，因为Java脚本非常小，所以制作一个脚本，从中央服务器动态加载最新的脚本，以便每个客户端都运行最新的脚本，这是一个好的做法吗？

一般最佳做法被认为是

合并到尽可能少的文件中

缩小

上菜

尽可能晚地提供服务（有些可能需要在头部，但通常优先考虑提前或异步）

这是一般性的建议，您需要这样做并进行测试，以确保它适合您的情况

---

最小化HTTP请求很重要，延迟是性能杀手…

第1部分：正如您所说，有两种方法

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

第2部分：

• 有几种方法可以强制浏览器始终下载最新的javascript文件，尽管这种方法会否定浏览器缓存的好处。一种常见的方法是在javascript URL的末尾添加get变量，即“domain.com/index.js？timestamp=_123123”。这类似于jQuery在为其ajax调用关闭缓存时所做的操作

---

您必须将优化分为几个步骤

优化源代码：有一些好的实践可以编写JS代码，这些代码具有较少的DOM开销、在内存中创建较少的变量和DOM元素、高效的循环等。脚本编译器通常无法优化这些代码

缩小：这有两种解决方案

• 合并成一个文件并缩小（使用谷歌的闭包编译器）
• 缩小每个文件，然后延迟加载。我个人喜欢使用模块模式定义我的模块。您可以使用启动文件选择编译成一个文件，或者保留模块结构和延迟加载，但每个模块也被缩小

服务器优化

• 您的服务器是否提供gzip javascript
• 如果可能，尝试使用
  ，如果您有脚本依赖项，请在使用asycn加载时小心。如果您使用AMD模块，它将确保您的依赖模块提前加载，并且每刷新一页只加载一次
• 使用CDN为静态内容提供服务，在内容交付网络上存储图像、文件和javascript

---

考虑一下。在连接了大多数页面上需要的主脚本之后，我会快速加载其他脚本。如果需要回调，则使用async和defer或内联服务（我就是这么做的）