26

在大型网站上，requireJS 实际上快了多少？

有没有人对使用异步加载与不使用异步加载的大型网站的速度进行过任何测试？

例如，使用带有大量视图（> 100）的 Backbone，最好是简单地使用一个视图对象来一次加载所有视图然后始终可用，还是应该根据需要异步加载它们？

此外，对于移动设备与桌面设备的这些注意事项是否有任何区别？我听说您想限制移动设备上的请求数量而不是大小。

4

2 回答 2

68

我不相信require.js的目的是在生产中异步加载所有脚本。在开发过程中，每个脚本的异步加载都很方便，因为您可以对项目进行更改并重新加载，而无需“编译”步骤。但是在生产中，您应该使用r.js 优化器将所有源文件组合成一个或多个更大的模块。如果您的大型 web 应用程序可以将模块子集的加载推迟到稍后时间（例如，在特定用户操作之后），这些模块可以单独优化并在生产中异步加载。

关于加载单个大 JS 文件与加载多个小文件的速度，一般来说：

“减少 HTTP 请求”已成为提高前端性能的普遍准则，这在当今的移动浏览器世界中更为相关（通常在比宽带连接慢一个数量级的网络上运行）。 [参考]

但还有其他考虑因素，例如：

  • 移动缓存：iPhone 限制了它们缓存的文件的大小，因此每次可能都需要下载大文件，从而使许多小文件更好。
  • CDN 用法：如果您使用像jQuery这样的常见 3rd 方库，最好不要将它包含在一个大的单个 JS 文件中，而是从 CDN 加载它，因为您网站的用户可能已经在另一个网站的缓存中拥有它（参考）。有关更多信息，请参阅下面的更新
  • 延迟评估：AMD 模块可以延迟解析和评估，允许在应用程序加载时下载，同时将 parse+eval 的成本推迟到需要模块时。请参阅这篇文章以及它引用的一系列其他较早的文章。
  • 目标浏览器：浏览器限制每个主机名的并发下载数量。例如，IE 7 只会同时从给定主机下载两个文件。其他限制为 4 个，其他限制为 6 个。[参考]

最后，这是 Steve Souders 的一篇好文章，总结了一堆脚本加载技术。

更新：关于CDN 的使用：Steve Souders发布了关于将 CDN 用于 3rd 方库（例如 jQuery）的详细分析，其中确定了许多注意事项、优缺点。

于 2012-07-19T14:33:54.290 回答
9

这个问题现在有点老了，但我想我可以补充一下我的想法。

我完全同意rharper使用 r.js 将所有代码组合起来进行生产，但也有拆分功能的情况。

对于单页应用程序，我认为将所有内容放在一起是有意义的。对于具有页面交互的大型更传统的基于页面的网站，这可能非常麻烦，并导致为许多用户加载大量不必要的代码。

我用过几次的方法是

  • 定义核心模块（所有页面都需要它们才能正常运行），这将被合并到一个文件中。
  • 创建一个了解 DOM 依赖关系和模块路径的模块加载器
  • on doc.ready 循环遍历特定页面所需的增强功能所需的模块加载器和异步加载模块。

这里的优点是您可以降低初始页面权重，并且由于在页面加载后异步加载其他脚本，因此感知性能应该更快。也就是说，以这种方式加载的所有功能都应该作为渐进增强（即表单上的ajax）来完成，以便在加载缓慢或错误的情况下，基本功能仍然可用。

于 2013-02-27T10:27:32.663 回答