Rocket loader js friendly

[iqbalhasnan]

Rocket loader [1] is a general purpose asynchronous Javascript loader that is used by Cloudflare to speed up the page load. Rocket loader will replace some of the native javascript functions with their own optimised functions and that cause issues with divolte.js

Issues caused by rocket loader:

1 - Access DOM array with [index] instead of item(index)

In this case, the HTML DOM item function is not part of the Rocket Loader function wrappers, therefore we need to access the element with [index] instead of item(index)

Rocket loader site

​

Normal site

2 - Rocket loader evaluates document.currentScript to null.

This will fail in https://github.com/divolte/divolte-collector/blob/master/src/main/resources/divolte.js#L87-L108 , because

typeof null === object

[1] https://support.cloudflare.com/hc/en-us/articles/200168056-What-does-Rocket-Loader-do-

please advise

[asnare]

Not handling document.currentScript being null looks like a bug, and fixing it looks harmless.

The DOM array situation is a little more complex: getElementsByTagName() returns a NodeList, not an Array, and on some older browsers NodeList doesn't support array indexing. This is why we use .item(). Not supporting it looks like a bug in CloudFlare's Rocket loader. Have you mentioned this to them?

This notwithstanding, is there an easy way to automate testing of CloudFlare's Rocket loader?
These sorts of things might be fixable, but I fear that without a way to add them to our test suite the chance of regressions in future releases is high.

One final question: does everything work under CloudFlare if you add data-cfasync='true' to the script tag loading Divolte in your page?

[iqbalhasnan]

One final question: does everything work under CloudFlare if you add data-cfasync='true' to the script tag loading Divolte in your page?

it works if I load the script this way

<script data-cfasync='false' src='/divolte.js'></script>

but it will not work when I load the script dynamically.

var script = document.createElement('script');
script.async = 1;
script.src ='divolte.js';
script.setAttribute('data-cfasync', false);
document.body.appendChild(script);

It seems CloudFlare ignores data-cfasync attribute when I load js dynamically

[iqbalhasnan]

Not supporting it looks like a bug in CloudFlare's Rocket loader. Have you mentioned this to them?

I haven't mentioned item(i) issue to CloudFlare yet, but I did raised about disabling rocket loaded for dynamically loaded js.