CloudFlareのRocket Loaderを個別に対処

プログラミングブログパーツ

なんか最近、
自作のブログパーツがうまく動かなくなっていることに気づきました。
おそらく年末か今年初頭の頃からおかしくなったようです。

調べてみたところ「CloudFlare」による副作用という結論に至りました。
このブログは無料ホスティングサービスの@pagesを利用していますが、
どうやら最近「CloudFlare」を導入したようです。
ただ告知はなかったように思います。
CloudFlareはWebページの表示速度を向上させるCDNサービスです。
基本的な仕組みはこんな感じらしいです。
要するにキャッシュして高速化を図るということのようです。

確かに以前より速くなっているような気がしないでもないです。
ただ残念ながらこちらにあるように、
JavaScriptがうまく行かなくなってしまうことがあるようです。

その他に個人的に調べてみたところでは、
HTMLの一部のタグが改変されるようです。
例えば、imgタグのsrc属性がdata-cfsrcに置き換わったり、
JavaScriptがtype=”text/rocketscript”に変わっていたりすることがあります。
これらはCDNサーバ側でうまく処理されることになっているようですが、
本来のタグの内容を想定している処理に影響が出たり、
JavaScriptが最適化されることによって
副作用が起きてしまうことがあるようです。

どうもJSONPが影響を受けている感じがします。
よくやる手法として、動的にスクリプトを読み込んで
callbackをキックしたりするわけですが、
返ってくる情報までがキャッシュされてしまうっぽい?
その時点での情報がほしいのに古いままだったりしました。

CloudFlareの Rocket Loader をオフにすれば、
JavaScriptでの問題はなくなるようです。
こちらこちらにあるように、
以下のようにscriptタグにdata-cfasync="false"を付加すれば、
Rocket Loader の対象から除外されるとのことです。
ただしscriptタグの一番目の属性として記述する必要があるようです。

<script data-cfasync="false" type="text/javascript" src="http://another.domain.example.com/getjson?callback=parseResponse">

ただし、オフにしてもすぐにはキャッシュが切れないようで、
少し様子見する必要がありそうです。
しばらくすれば、うまく動くようになると思います。

動的にスクリプトを読み込む場合は、
以下のようにJavaScriptで書けば良さそうです。
これで Rocket Loader から除外されるはずです。

function loadScript(src) {
	var s = document.createElement('script');
	s.setAttribute('data-cfasync','false');
	s.type = 'text/javascript';
	s.src = src;
	document.body.appendChild(s);
}

Posted by 管理人