Ruby
 Computer >> コンピューター >  >> プログラミング >> Ruby

Turbolinksを使用してアプリのナビゲーションを高速化する

Turbolinksは、知覚を向上させる最適化です。 ページの切り替えとアプリでのアセットの再読み込みを賢く行うことでパフォーマンスを向上させます。条件付きGETリクエストとは異なり、Railsアプリ自体のRubyコードを変更する必要はありません。 Turbolinks 5はJavaScriptライブラリであり、どこでも機能し（静的ページのように、Railsがなくても）、サポートされていないブラウザでは正常に機能しなくなります。

ターボリンク5

TurbolinksはRailsにバンドルされており、Rails 4以降、デフォルトで新しいアプリケーションに含まれています。Rails5にはTurbolinks 5が付属しています。これは、現在TurbolinksClassicと呼ばれているものを書き直したものです。

Railsに同梱されていますが、新しいバージョンのTurbolinksは純粋なJavaScriptライブラリであり、<script>に配置する任意のHTMLページで使用できます。 ページにタグを付けるか、アプリのJavaScriptバンドルに含めます。

含まれている場合、Turbolinksは同じドメインを指すすべてのリンクを自動的に検索し、クリックイベントリスナーをアタッチします。これらのリンクへのクリックはすべて傍受されます。通常のようにリンクをたどる代わりに、XMLHttpRequestを使用してJavaScriptを介してバックグラウンドでリンクされたページをリクエストします 。次に、4つのことが起こります：

  1. 現在のページのコピーは、後で使用するためにTurbolinksのキャッシュに保存されます
  2. 置き換えます 現在のページの<body> <body>で XHRの結果から
  3. マージ 現在のページの<head> <head>で XHRの結果から
  4. HistoryAPIを使用してブラウザのURLを変更します

<head>をマージする タグを使用すると、ブラウザは両方のページに存在するCSSファイルやJavaScriptファイルなどのアセットをリロードして再レンダリングする必要がありません。これにより、特にほとんどのページで再利用されるアセットが多数ある場合に、アプリを大幅に高速化できます。

いくつかのビューを備えた新しいRails5アプリでは、リンクをクリックして戻るボタンを押してナビゲートすることで、Turbolinksの動作を確認できます。ブラウザの[ネットワーク]タブに、「xhr」とマークされたTurbolinksを介してロードされたページのリクエストが表示されます。また、リクエストごとにアセットがリロードされるわけではありません。

キャッシュとページのプレビュー

同じページへの後続のリクエストを高速化するために、Turbolinksは最近アクセスしたページのキャッシュを維持します。これにより、たとえば、戻るボタンを押すとすぐに前のページをレンダリングできます。

遅いページの知覚パフォーマンスを高速化するために、Turbolinksは、ページがキャッシュに存在する場合、そのプレビューを表示します。リンクをクリックすると、新しいバージョンが読み込まれている間、キャッシュされたバージョンが表示されます。

警告

Turbolinksはブラウザのデフォルト機能の一部を再実装するため、Turbolinksを有効にすると動作が異なる場合があります。

turbolinks:load および<script> タグ

リンクをクリックするたびにページが更新されるわけではないため、window.onloadを使用してページの読み込み時にJavaScriptを読み込みます またはDOMContentLoaded もう動作しません。これを修正するために、Turbolinksはturbolinks:loadを提供しています 代わりに使用できるイベント：

document.addEventListener("turbolinks:load", function() {
  // ...
})

ブラウザの読み込み状態

ページを切り替えると、リクエストはバックグラウンドで実行されるため、ブラウザに読み込みインジケーターが表示されません。

これを修正するために、Turbolinksは500ミリ秒後にページの上部に青いバー（CSSでスタイル設定可能）を表示して、ページが読み込まれていることを示します。

$ rails new --skip-turbolinks ？

Turbolinks 5は、Turbolinks Classicから長い道のりを歩んできました。当時、Turbolinksは、新しいRailsアプリを生成するときにスキップしたもののようでした。 Railsに依存しない純粋なJavaScriptプラグインを優雅に劣化させるため、注意事項を念頭に置いておくと、ほとんどのアプリですぐに使用できます。

その見返りとして、Turbolinksは速度を大幅に向上させ、静的アセットがすべてのページビューで再読み込みされるのを防ぎます。これにより、一部のネットワークリクエストが節約されます。新しいRailsアプリを生成するときは、Turbolinksをそのままにして、その機能を確認してください。既存のアプリで、Turbolinksを試してみてください！

以上で、ターボリンクの概要は終わりです。いずれかのアプリでTurbolinksを使用していますか？あなたからの御一報をお待ちしています！また、AppSignal Academyのこの記事と以前の記事がどのように気に入ったか、または@AppSignalで次に何を読みたいかについても興味があります。


  1. 最初のWebスクレイパーの構築、パート2

    このチュートリアルでは、Mechanizeを使用してリンクをクリックし、フォームに入力し、ファイルをアップロードする方法を学習します。また、Mechanizeページオブジェクトをスライスする方法と、Google検索を自動化してその結果を保存する方法についても学習します。 トピック 単一ページとページ付け 機械化 エージェント ページ ノコギリメソッド リンク クリック フォーム 単一ページとページ付け これまで、ノコギリを使用して1ページの画面をスクレイプする方法を理解するために時間を費やしてきました。これは、一歩前進し、複数のページからコンテンツを抽出する方法を学ぶための良い基

  2. ID ウォッチドッグで ID を保護

    彼らについて ID ウォッチドッグは、個人情報の盗難が常に不可能であることを保証する市場での過去 13 年間の存在を証明してきました。クレイグ・ラムゼイ氏は、2005 年 6 月にコロラド州デンバーにある信用専門家のグループと共にこの会社を設立し、ID 盗難保護サービスの国内有数の上位 5 社にその名前を登録しました。 ID Watchdog は当初、法執行機関、銀行、クレジット会社、司法代理人、および情報プライバシーのリーダーとの協議に 2 年間を費やしました。 ID 保護とは別に、ID Watchdog は 2007 年に公式プラットフォームをリリースし、個人向けサービス、保険パートナー