优化javascript加载的最佳实践

Question

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

第1部分）

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

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

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

第2部分）

我正在处理的Web应用程序将部署到许多其他计算机，因为javascripts非常小，制作一个从中央服务器动态加载最新脚本的脚本是一个好习惯，这样每个客户端都将运行最新的脚本？

Answer 1

一般最佳实践被认为是

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

2. 缩小

3. 服务gzipped

4. 服务尽可能晚（有些可能需要在头部，但通常在优先之前或异步

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

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

Answer 2

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

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

第2部分：

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

Answer 3

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

1. 优化源代码：编写具有较少DOM开销的JS代码，在内存中创建较少的变量和DOM元素，有效的循环等等都有很好的做法。这些通常无法通过脚本编译器进行优化。
2. 缩小：这有两个解决方案
   • 合并到一个文件并缩小。（使用Google的Closure Compiler， Uglify ）
   • 缩小每个文件，然后延迟加载。 我个人喜欢使用AMD模块化模式定义我的模块。 您可以使用引导文件选择编译为一个文件或保留模块结构和延迟加载，但每个模块也都缩小了。
3. 服务器优化
   • 你的服务器是否提供gzip压缩包？
   • 尽可能使用<script src='//...' async defer> ，如果你有脚本依赖，在使用asycn加载时要小心。 如果您使用AMD模块，它将确保您的相关模块提前加载，并且每页刷新只加载一次。
   • 使用CDN提供静态内容，将图像，文件，javascript存储在Content Delivery Network上