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

Question

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

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

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

此外,移动与桌面的这些考虑因素有什么不同吗？我听说你想限制手机上的请求数而不是大小.

Answer 1

我不相信require.js的意图是在生产中异步加载所有脚本.在开发中,每个脚本的异步加载都很方便,因为您可以对项目进行更改并在没有"编译"步骤的情况下重新加载.但是在生产中,您应该使用r.js优化器将所有源文件组合成一个或多个更大的模块.如果您的大型Web应用程序可以将模块子集的加载推迟到稍后(例如,在特定用户操作之后),则这些模块可以单独优化并在生产中异步加载.

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

"减少HTTP请求"已成为加速前端性能的一般准则,这一点在当今的移动浏览器世界中更为重要(通常运行在比宽带连接慢一个数量级的网络上). [参考]

但还有其他一些考虑因素,例如:

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

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

更新:重新使用CDN:Steve Souders 发布了使用CDN进行第三方库(例如jQuery)的详细分析,其中列出了许多注意事项,优点和缺点.

Answer 2

这个问题现在有点老了,但我想我可能会加入我的想法.

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

对于单页应用,我认为将所有内容放在一起是有道理的 对于具有页面交互的大规模更传统的基于页面的网站,这可能非常麻烦并且导致为许多用户加载许多不必要的代码.

我用了几次的方法是

• 定义核心模块(在所有页面上都需要它们才能正常运行),这可以合并到一个文件中.
• 创建一个模块加载器,它理解DOM依赖关系和模块路径
• 在doc.ready循环中通过模块加载器和特定页面所需的增强功能所需的异步加载模块.

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