CloudFlareのRocket Loaderを個別に対処

 プログラム,
 公開日:2014年1月6日

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

調べてみたところ「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タグの一番目の属性として記述する必要があるようです。

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

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

タグ: ,

コメント / トラックバック 2 件

  1. 匿名 より:

    同じ問題を探していた所こちらの記事にたどり着き解決しました。

    ありがとう御座いますm(__)m

    • 管理人 より:

      お役に立てて、なによりです(^_^)
      ちなみに、
      ファイルを更新したのになかなか反映されない場合は、
      この手を使うと改善するかもしれません。

コメント投稿