一周前,我的网络应用程序变得越来越大,我遇到了一些麻烦,并意识到我必须找到某种异步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。