在 JS 中使用 RequireJS/AMD 获得多少速度? [英] How much speed is gained with RequireJS/AMD in JS?

问题描述

在大型网站上，requireJS 实际上要快多少?

How much faster is requireJS actually, on a large website?

有没有人测试过使用异步加载与不使用异步加载的大型网站的速度?

Has anyone done any tests on the speed of large websites that use asynchronous loading vs not?

例如，使用具有大量视图 (> 100) 的 Backbone，是简单地拥有一个一次性加载所有视图然后始终可用的视图对象更好，还是应该将它们全部异步加载为需要吗?

For instance, using Backbone with a lot of views (> 100), is it better to simply have a views object that gets loaded with all the views at once and is then always available, or should they all be loaded asynchronously as needed?

此外，对于移动设备和桌面设备，这些注意事项是否存在差异?我听说您想限制移动请求的数量而不是大小.

Also, are there any differences for these considerations for mobile vs desktop? I've heard that you want to limit the number of requests on mobile instead of the size.

推荐答案

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

I don't believe that the intent of require.js is to load all of your scripts asynchronously in production. In development async loading of each script is convenient because you can make changes to your project and reload without a "compile" step. However in production you should be combining all of your source files into one or more larger modules using the r.js optimizer. If your large webapp can defer loading of a subset of your modules until a later time (e.g. after a particular user action) these modules can optimized separately and loaded asynchronously in production.

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

Regarding the speed of loading a single large JS file vs multiple smaller files, generally:

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

"Reduce HTTP requests" has become a general maxim for speeding up frontend performance, and that is a concern that’s even more relevant in today’s world of mobile browsers (often running on networks that are an order of magnitude slower than broadband connections). [reference]

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

But there are other considerations such as:

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

• Mobile Caches: iPhones limit the size of files they cache so big files may need to be downloaded each time, making many small files better.
• CDN Usage: If you use a common 3rd party library like jQuery it's probably best not to include it in a big single JS file and instead load it from a CDN since a user of your site may already have it in their cache from another website (reference). For more info, see update below
• Lazy Evaluation: AMD modules can be lazily parsed and evaluated allowing download on app load while deferring the cost of parse+eval until the module is needed. See this article and the series of other older articles that it references.
• Target Browser: Browsers limit the number of concurrent downloads per hostname. For example, IE 7 will only download two files from a given host concurrently. Others limit to 4, and others to 6. [reference]

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

Finally, here's a good article by Steve Souders that summarizes a bunch of script loading techniques.

更新:关于 CDN 的使用:Steve Souders 发布了一份详细分析，详细分析了将 CDN 用于 3rd 方库(例如 jQuery)，确定了许多注意事项、优点和缺点.

Update: Re CDN usage: Steve Souders posted a detailed analysis of using a CDN for 3rd party libraries (e.g. jQuery) that identifies the many considerations, pros and cons.

这篇关于在 JS 中使用 RequireJS/AMD 获得多少速度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！