先日、私は Twitter を使用していました。chrome devtools を開いてネットワーク コンソールにアクセスし、Twitter のリンク (具体的には、メニュー バーにある [Me] と表示されているリンク) をクリックすると、いつものようにそのページが表示されました。 AJAX 化されているように見えましたが、ネットワーク コンテンツを調べたところ、いくつかの画像といくつかの JavaScript ファイルしか表示されませんでした。
Twitter がホームページの読み込み時に「Me」ページからコンテンツを読み込まない限り (Twitter は読み込みも非常に高速であるため、これは非常に疑問です)、Twitter のページ間のナビゲーションがこれほど高速になるのはなぜでしょうか?
すべての JS アプリと同様に、表示されるページは単なる「ビュー」です。あなたは同じページにいて、AJAX を介してものが読み込まれ、JS がテンプレートを使用してデータをレンダリングし、そのビューを形成します。
シナリオは次のとおりです。クリーンなブラウザーを開いて Twitter のタイムラインに移動すると、すべてが読み込まれます。これには、後続のページをレンダリングするために必要なすべてのスクリプトも含まれます。
ここで、「Me」などの別のページに移動すると、Twitter にはまだそのページのリソースがありません。そのため、すべてのデータと同様に「Me」ページをレンダリングするために必要なリソースとそのテンプレートを AJAX 経由でロードします。ロード後、データをレンダリングし、テンプレートを使用して「Me」ページを形成します。
タイムラインに戻ると、Twitter はタイムライン データを破棄せずにキャッシュしました (せいぜい localstorage) 。したがって、タイムライン (または、訪問したページ) に戻るには、キャッシュされたデータ、キャッシュされたテンプレートを読み取り、ビューをページに再レンダリングするだけです。ネットワーク要求はまったく必要ありません。
また、お気づきのように、新しいデータは、すべてを取得するのではなく、サーバーから新しいツイートをクエリするだけで、段階的に取得されます。新しいデータセットが必要であるとページが判断した場合にのみ、一連のデータをクエリします。
また、JSON データは、通常のページをロードするよりも 100 万倍 (誇張して) 軽量です。