RequireJS减慢页面加载时间

时间:2014-03-04 16:59:53

标签: performance asynchronous requirejs amd

一周前,我的网络应用程序变得越来越大,我遇到了一些麻烦,并意识到我必须找到某种异步JS加载程序,所以我可以在真正需要时加载脚本。

我找到了requireJS并阅读了很多关于它和AMD的内容。一切似乎都是正确的,它可以帮助我在模块中组织我的代码,并且我将拥有所有异步加载/依赖关系来解决好处。

我的应用程序是单页面,所有HTML都使用模板在浏览器中呈现。我使用grunt来连接和缩小我的所有JS并通过脚本标签加载它。

我的应用程序的加载时间(我通过使用<head>performance.now()中设置变量,在应用程序渲染功能中设置另一个变量来测量它)大约是90ms。

但令我惊讶的是,在将我的应用程序的核心更改为使用requireJS,并使用优化工具连接和缩小所有内容之后,加载时间增加到150毫秒。

我认为这很奇怪,因为在这两种情况下,所有JS都连接在一个文件中。我会理解,如果requireJS必须再提出一个请求来获取我的app.js,但事实并非如此。

所以 - 我的问题是: 有没有办法让requireJS加载更快?有没有解决方法?或者任何其他选择?

我在google上彻底搜索了类似的问题,但找不到任何提示。

- 编辑:

我创建了这个jsFiddle来向你展示我的意思:http://jsfiddle.net/fedevegili/Nhq3q/

如您所见,“开始”表示在加载requirejs之后和定义“测试”之前的时间。

“执行”是指执行“测试”内容的时间。

“完成”表示回叫时间。

我无法弄清楚为什么只调用一个刚刚定义的函数需要78毫秒。

我的测试结果是:

Start: 2ms
Executed: 80ms
Callback: 81ms

- edit2

我刚刚使用curljs尝试了相同的JSFiddle:http://jsfiddle.net/fedevegili/67rBB/

我的测试结果是

Testing with curljs --

Start: 1ms
Executed: 1ms
Callback: 55ms

如您所见,代码在定义后立即执行。进一步的测试我发现使用curljs代码会在定义时执行,而requirejs会在需要时执行它。

由于存在这种差异,我将不得不使用curljs。

0 个答案:

没有答案