JS中的RequireJS / AMD获得了多少速度？

Question

在一个大型网站上，requireJS实际上要快多少？

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

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

此外，移动与桌面的这些注意事项是否有任何差异？我听说你想限制手机上的号而不是大小。

Answer 1

我不相信 require.js 的意图是在生产中异步加载所有脚本。在开发中，每个脚本的异步加载都很方便，因为您可以对项目进行更改并在没有“编译”步骤的情况下重新加载。但是在生产中，您应combining all of your source files使用r.js optimizer [reference]进入一个或多个更大的模块。如果您的大型Web应用程序可以将模块子集的加载推迟到稍后（例如，在特定用户操作之后），则这些模块可以单独优化并在生产中异步加载。

关于加载单个大型JS文件与多个较小文件的速度，通常为：

  

“减少HTTP请求”已经成为加速前端性能的一般准则，这一点在当今的移动浏览器世界中更为重要（通常运行在比宽带连接慢一个数量级的网络上） 。 iPhones limit the size of files they cache

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

• 移动缓存：reference每次都可能需要下载大文件，从而使许多小文件更好。
• CDN用法：如果您使用常见的第三方库，例如 jQuery ，最好不要将其包含在一个大的单个JS文件中，而是从CDN加载它因为您网站的用户可能已将其存储在其他网站（this）的缓存中。 有关详细信息，请参阅下面的更新
• 延迟评估：可以延迟解析和评估AMD模块，允许在应用程序加载时下载，同时延迟解析+ eval的成本，直到需要模块为止。请参阅[reference]文章及其引用的其他旧文章系列。
• 目标浏览器：浏览器限制每个主机名的并发下载次数。例如，IE 7将仅同时从给定主机下载两个文件。其他限制为4，其他限制为6. here's a good article by Steve Souders

最后，posted a detailed analysis总结了一堆脚本加载技术。

更新：重新CDN用法：Steve Souders {{3}}使用CDN代表第三方库（例如jQuery），它识别了许多注意事项，优点和缺点。

Answer 2

这个问题现在有点老了，但我想我可能会加上我的想法。

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

对于单页应用程序，我认为将所有内容放在一起是有道理的。对于大规模更传统的基于页面的网页进行页面交互，这可能非常麻烦，导致为很多用户加载大量不必要的代码。

我曾经使用过几次的方法是

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

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