order! plugin in chrome 6 about requirejs

[jrburke]

Do you have a test case I might be able to try? I modified this one that is part of the RequireJS unit tests, can you try it?

http://www.tagneto.org/temp/requirejs/tests/order/order.html

(warning, that link will probably not work after a month or so)

I try the link above, and it seems to work for me in Chrome 6 on OSX.

It could be another problem: in RequireJS version 0.12 and possibly before, I accidentally took out a throw of a timeout error, so it was calling the callbacks erroneously. If you try the latest require.js with the order plugin it may work better, the exception is thrown properly now.

I hope to do a 0.13 release in the next couple days, which will also have the error throwing fix for timeouts.

If it is a timeout issue, I expect it to happen around 7 seconds after loading, that is how long the default timeout is for resource loading.

But if you can confirm the above test works for you or provide more information on a failure case, that would be very helpful.

[amirshim]

It happens in the test case, but not always. Chrome 6.0.472.53 under windows 7. (see image)

In this case, it seems that "two" is not executed before "three.js" is.

The way I tested it was going to a different page, clearing the cache, and then going back to the page. After 3 or 4 times, it happened. It's definitely not a timeout since it happens as soon as the "two" file loads. (about 3 seconds)

-- update --

I'm not sure that it's not the timeout. I'll take a look later when I have some time.

[jrburke]

Thanks for more info. I am trying with Chrome 6.0.472.53 under windows 7, but I am running it in a VM. I cannot seem to make the test page error out. If you can confirm the precise steps, then I will try more:

• Go to test page, it loads OK
• Go to google.com.
• Open Options, Under the Hood, Clear Browsing Data
• Select only "Empty the cache", then select Everything in the dropdown, then click the "Clear browsing data" button.
• Hit the Back button to go back to original test, or do you navigate fresh to the test URL (like via copy/paste)?

I tried a few runs with the back button but then also just copy/pasting the url fresh, but have not seen a failure yet.

[amirshim]

I got it to happen again with resource timing on... hope this helps...
http://aviary.com/artists/amirshim/creations/bug-timing

[amirshim]

I got it to happen without clearing the cache and while capturing the events...
http://aviary.com/artists/amirshim/creations/requestjs-bug-4
(open it for edit in aviary to see a higher res version)

three is being evaluated before two.

[jrburke]

Thanks for the screen shots, they do give a bit more information. Looking at this one:
http://aviary.com/artists/amirshim/creations/bug-timing

It looks like the two.js (which is almost a 2MB file) is taking about 5 seconds to load, and there is a second request for it. This brings up these questions for me:

It looks like the cache headers are not being obeyed for some reason: there should only be one request for two.js, not two. Can you examine the HTTP response headers for two.js? For the first and only request I see, the two.js response headers look like so:

Accept-Ranges:bytes
Content-Length:1990466
Content-Type:application/javascript
Date:Sat, 11 Sep 2010 04:42:59 GMT
ETag:"96a964a-1e5f42-4c704620"
Last-Modified:Sat, 21 Aug 2010 21:33:20 GMT
Proxy-Connection:Keep-alive
Server:Apache
Vary:*

So I think that is the core of the problem. For some reason, there is a second request when there should not be, and it takes about 5 seconds for each request for two.js to complete, which will go past the 7 second timeout RequireJS uses for timing out on possible errors fetching scripts. I also believe the second request is what causes the out of order problem.

So we need to figure out why it was requested twice. If you are running through a proxy or some middleware that you know of that may change the caching behavior, that would be good to know. First step, we can see what response headers you get for two.js to the list I get above to see how they differ.

[amirshim]

I tried a couple of times, and wasn't able to reproduce it. Since you said it might have something to do with caching, I started fiddler and disabled caching. It happened immediately. Does this mean that the order plugin won't work if a file is set to "no-cache"?

The response headers (when fiddler is on and set to no-cache) is: (both times)

Accept-Ranges:bytes
Cache-Control:no-cache
Connection:Keep-Alive
Content-Length:1990466
Content-Type:application/javascript
Date:Sat, 11 Sep 2010 06:23:30 GMT
ETag:"96a964a-1e5f42-4c704620"
Keep-Alive:timeout=5, max=49
Last-Modified:Sat, 21 Aug 2010 21:33:20 GMT
Server:Apache
Vary:*

except that Date is 06:23:32 GMT for the second request

the other difference is in the request header:
The second one has these two extra headers:
If-Modified-Since:Sat, 21 Aug 2010 21:33:20 GMT
If-None-Match:"96a964a-1e5f42-4c704620"

I'll try to make it happen without no-cache... and let you know if I succeed.

[jrburke]

Yes, you are correct, the order! plugin will not work with files that are not cacheable. I will put that in the notes for the order plugin.

[abdes]

Tested the URL above:

Chrome 7.0.517.41 on Windows 7

/temp/requirejs/require.js:117Uncaught Error: require.js load timeout for modules: two three.js

Cache cleared before...

Please retest the URL you provided above.

[abdes]

Firefox 3.6.12

require.js load timeout for modules: two three.js
[Break on this error] err = new Error("require.js load timeout for modules: " + noLoads);
require.js (line 940)

[jrburke]

abdes: can you clarify what URL you tried? Was it this one?

http://www.tagneto.org/temp/requirejs/tests/order/order.html

I just tried with Chrome 7.0.517.41 on Windows 7 and Firefox 3.6.12, and it works for me.

I suspect that following: one of the test files, two.js is very large, close to 2MB, so if you are on a slow connection that takes longer than 7 seconds to load two.js, then this is the error you will see. And in that case, the code is working correctly.

You can check in the web developer tools in Chrome, using the Resources tab to check how long two.js took to download. I'm going to close this bug for now as I suspect that is the problem, but please feel free to reopen with new information if it is not.

[abdes]

Hi James,

Yes correct. I do have a slow internet connection.

The second issue I observed this time not with a large file but with very small modules on my local system is the following:

If you use the optimizer to create layers (say appcommon.js) which require modules using define() (modules with no define are ok, e.g. 3rd party jquery plugins), and those modules use the order! plugin in their dependencies, then the following will happen:

• In firefox, everything is all right
• In Chrome or IE, the layer will be loaded (note that the layer contains all dependencies already), then the dependencies which use define() will also be laoded. You can see this in Chrome resources through requests sent to fetch them. The load wll timeout after 7 seconds and a JS error displayed.

If I remove the order! from the dependencies of these modules, then all 3 browsers work.

[jrburke]

Interesting. If you are able to put together a small test case that I could try, I can take a look at the issue. Or, just sketching out more of the build config and module hierarchy might be useful (these options in the optimizer config were used, the modules are laid out on disk, and this module does an order! load of this other module), that sort of thing, so I can try to work up a test case.

[abdes]

Hi James,
I got the test case for you based on the sample you provide with RequireJS.
As I'm not very familiar with github, can you tell me how I can get you the ZIP file?

[jrburke]

I suppose you could just create your own github repo and I could pull the code from there. Or, if you have a zip, just put it up somewhere I can get an URL for it. If it is small enough, (under 1 MB) you could probably just email it to me via the email I use on the requirejs list.

[abdes]

It's in GoogleDocs, let me know if you don't get the invitation...

[jrburke]

Great, I got it, will be looking at it tomorrow (winding down for bedtime now).

[jrburke]

I took a look and there are two issues:

• the RequireJS+jQuery file does not include plugin support, so when the order plugin is used it causes an error. I will fix that combined file to allow for loading of plugins. You can fix this in the meantime by downloading the requireplugins-jquery-1.4.3.js file and using that in your project instead of the require-jquery.js file.
• The optimizer is not picking up order! resources and putting them in the built layer. I will look at supporting this, but it will take a bit of work. In the meantime, I suggest not using the order! plugin if you can get away with not using it.

Note that the in-development versions of WebKit and Firefox break the order plugin too, so the plugin may become obsolete at some point. Although I do hope there is a fix for it, but it will require browser changes. Kyle Simpson has been documenting the issue on this wiki page.

[abdes]

Not using the order! plugin seems to me the right approach given the fragility of its support in the browsers.

What I decided to do is in fact use the layers approach to ensure that dependencies between well known things (e.g. ui->jquery, plugins->jquery+ui, etc...) are encapsulated within the layers.

This only assumes that the optimizer will actually inline the scripts into a single file in the order I list them in the require statement. Is that correct?

Does this approach seem right to you?

[jrburke]

The optimizer generally includes files in the order you list them, but there is some fuzziness to it: if you list "a", "b", "c", but "a" depends on "c", then "c" may show up first. And nested dependencies may show up first.