5

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

第1部分）

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

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

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

第2部分）

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

4

3 回答 3

3

一般最佳实践被认为是

  1. 合并到尽可能少的文件中

  2. 缩小

  3. 提供压缩包

  4. 尽可能晚地服务（有些可能需要在头脑中，但一般在之前或异步是首选

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

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

于 2012-04-11T21:20:08.430 回答
3

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

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

第2部分：

  • 有一些方法可以强制浏览器始终下载最新的 javascript 文件，尽管这会抵消浏览器缓存的好处。一种常见的方法是在 javascript URL 的末尾添加一个 get 变量，即“domain.com/index.js?timestamp=_123123123”。这类似于 jQuery 在您关闭其 ajax 调用的缓存时所做的事情。
于 2012-04-11T21:22:39.633 回答
2

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

  1. 优化源代码：编写 JS 代码有更少的 DOM 开销、在内存中创建更少的变量和 DOM 元素、高效的循环等，这些都是很好的做法。这些通常无法通过脚本编译器进行优化。
  2. 缩小：这有两个解决方案
    • 合并成一个文件并缩小。（使用谷歌的闭包编译器，Uglify）
    • 缩小每个文件，然后延迟加载。我个人喜欢使用AMD模块化模式来定义我的模块。您可以使用引导文件来选择编译成一个文件或保持模块结构和延迟加载，但每个模块也会被缩小。
  3. 服务器优化
    • 您的服务器是否提供 gzipped javascript？
    • 尽可能尝试使用<script src='//...' async defer>，如果你有脚本依赖，使用异步加载时要小心。如果您使用 AMD 模块，它将确保您的依赖模块提前加载，并且每次页面刷新它们只加载一次。
    • 使用 CDN 为您的静态内容提供服务，在内容交付网络上存储您的图像、文件、javascript
于 2012-04-14T02:48:00.103 回答