2021年9月20日現場Rails Chapter8 Turbolinks
Turbolinksとは？
全てのリンクに対するページ遷移を自動的にAjax化する事で、ページ遷移を高速化する仕組みです。Turbolinks自体はJavaScriptのライブラリとして提供されていますが、Railsでは利用しやすいようにGemとしてrals newすることでデフォルトで組み込まれています。
画像引用
- リンクのクリックイベントが発火
- 画面遷移を阻害し、非同期でリクエストを送る
- HTMLをレスポンスとして返す
- headタグに含まれているJSとCSSが、現在のページと一致しているかチェック
- headタグは統合、bodyタグは書き換えることで画面遷移が起きたように見せかける
つまり、Turbolinksは、リンク(aタグ)をクリックした際にページを遷移させるのではなく、Ajaxを使って、headタグを統合、bodyタグを書き換えます。head内のタグを統合することで、titleタグ以外のcss,Javascriptファイルを毎回読み込む必要がなくなるので、高速でページを表示できます。
ここまでのまとめ：なぜTurbolinksを使うと高速化できるの？
Turbolinksはページ遷移を行うのではなく、head要素のcssとJavascriptを統合(titleは書き換え)し、body要素を書き換えます。そうすることで、不必要な要素を再度読み込む必要がなくなり、高速化が実現できるのです。
Turbolinksが有効な環境での注意点
- ブラウザのページ遷移が発生しないことが多くなります。
// tubolinksはリンクをクリックすることで、発火するので、ページ全体が読み込まれるイベント(window.onload)は発生しなくなります。 window.onload = function() { console.log('Hello World!'); };
on loadはページ全体が読み込まれた際に発生するイベントを定義しています。
しかし、Turbolinksは通常のページ遷移を発生させないため、このロードイベントは最初のページが表示されるとき以外は発火されません。Turbolinks使用下では以下のようにturbolinks:loadイベント(Turbolinks専用のイベント)を使用する必要があります。
document.addEventListener('turbolinks:load', function() { console.log('Hello World'); });
scriptタグはhead要素内に記述する
scriptタグをheadタグに書くことで、リクエスト毎のJavaScript取得を防げます。 そのためscriptタグはheadタグに書くべきです。turbolinksでは、headタグ内に新しいscriptタグがあった時に、そのタイミングで一回統合を行います。 body要素にscriptタグを配置してしまうと毎回読み込まれてしまうため書くべきではありません。(JavaScriptを毎回読み込まないことで高速化しているのでTurbolinksの恩恵を受けられない)
またTurbolinksはページ遷移が発生しないためwindowやdocumentといったグローバルオブジェクトが変わらずに、処理内容が重複してしまうためです。
グローバルオブジェクトとは?
グローバルオブジェクトは、グローバルスコープ上に常時存在するオブジェクトです。 ウェブブラウザーでは、明示的にバックグランドタスクとして起動されるコードを除き、 Window がグローバルオブジェクトになります。 ウェブにおける JavaScript コードのほとんどはこのケースに該当します。
