Turbolinksとは？
Railsが提供するリンククリックに対するページ遷移を自動的にAjaxにする技術でページ遷移を高速化します。（なお、Turbolinks自体はRailsとは独立したライブラリになります。）、なおRailsで新しいアプリケーションを作った際に自動で有効になっているので新しく設定をする必要もありません。
Turbolinksの仕組み
- aタグをクリックすると遷移先のページをAjaxで取得する。
- 取得したページが要求するJSやCSSが現在のものと同一であればそれをそのまま利用してtitleやbodyのみ置き換える。
この流れによりリクエストごとにJavaScriptやCSSをブラウザがいちいち評価しなくなりページ遷移も発生しないためパフォーマンスが向上します。
Turbolinksの導入判断
高速化という大きなメリットがありますが、JavaScriptの動きの激しいサイトを作る場合は無効にする場合も多いです。必要に応じて判断して下さい。
プレビュー機能
1度訪れたことのあるページを再度訪問した際に前回のキャッシュを一旦表示してからリクエストを送信し取得が完了したら新しいものに置き換えるプレビュー機能があります。UXの向上には繋がるがキャッシュされた古い画面が一瞬表示されるのでそこには注意する。
サポートしているリクエストメソッド
GETのみだが、POST、PATCH、DELETE等のリクエストでもredirect_toによるリダイレクトの際は動作を最適化してくれます。
Turbolinksとイベントについて
通常のJavaScriptやjQueryのページ遷移発火イベントが動作しない。
以下のようなJavaScriptやjQueryのイベントはページ遷移が実際に行われていないため発火しません。
- window.onload
- DOMContentLoaded
- $(document).ready()
なので、Turbolinks自身の処理状態に応じてイベントを発行するようにしなければなりません。
turbolinks:load
- 「初回のページ表示時」や「ページ遷移時」に発火するイベント
Turbolinks実装時の注意点
<script>は必ず<head>内に記述をする。
- body内に記述をするとbody要素の中身が評価される際についでにJavaScriptも評価されて動作が遅くなるため。
- windowやdocument等のグローバルオブジェクトにイベントハンドラをを追加する場合にTurbolinsでページ遷移しても同じオブジェクトが存在しているため重複して処理されてしまうため。
Turbolinksで読み込むJavaScriptやCSSはできるだけページごとにまとめること
ページが異なってもapplication.jsとapplication.cssにできるだけ処理をまとめること。ページごとに違うファイルが読み込まれるとページ遷移の度にファイルの読み込みが発生してTurbolinksによる高速化のメリットがありません。
この記事へのコメントはありません。