ブラウザ履歴を理解する

これは、ブラウザーでの履歴スタック管理の関連コンテンツについて説明する基本的な記事です。これを書いた理由は、最近、PushState を使用して SPA を実装するときにどのような問題が発生するかを調べたかったためです。PushState は最終的にブラウザー履歴スタックのコンテンツに影響を与えるため、ブラウザーがそれをどのように管理するかを検討しました。履歴スタック。というのも、調べていくうちに、今まで気づかなかった重要なポイントがいくつか見つかったので、記録しておきました。

デモのアドレス: http://liuyunzhuge.github.io/blog/history/demo1.html

このデモは、この記事で後述する関連テストに使用されます。興味がある場合は、新しい問題をテストするたびに、既に開いている問題から開くのではなく、新しいタブでこのデモを開くことをお勧めします。 Web ページのタブを開きます。Web ページのタブが開かれているため、その履歴スタックには以前にアクセスした Web ページの記録がすでに含まれているため、テストする問題の結果に影響します。

ブラウザは、同じウィンドウ (タブ) 内で訪問した Web ページを記録します。次のいずれかの方法で Web ページを変更しても、ブラウザは変更された Web ページを記録し、ブラウザの転送や転送を通じて使用できるようにします。 [戻る] ボタンを使用すると、訪問した Web ページにすぐに切り替えることができます:
1) アドレス バーに Web ページのアドレスを直接入力します。
2) Web ページ内のハイパーリンクをクリックすると、他の Web ページにジャンプできません。新しいウィンドウで開くリンクであること。
3) スクリプトを通じて location.href を変更することで他の Web ページにジャンプする。ただし、フォームを送信して他の Web ページにジャンプすることはできない。窓。
つまり、Web ページが同じウィンドウ内でジャンプしている限り、ブラウザはそれを記録します。更新を除いて、履歴オブジェクトの長さ属性は、現在のウィンドウに保存されている履歴レコードの総数を表示できます。この属性は、Web ページが変更された場合にのみ変更されます。 Web ページの更新中 このプロパティは変更されません。

ブラウザには Web ページの履歴を保存するためのデータ構造があり、その構造がスタックの使用方法に似ているため、私はこれを履歴スタックと呼びます。

操作テスト 1: 前のデモのアドレスをコピーし、Chrome ブラウザで次の手順に従ってください:

新しいタブを開き、demo2.html をクリックし、demo3.html をクリックします。

ブラウザは、以下の図と同様の方法で上記のアクセス記録を保存します:

現在のブラウザはマルチタブ モードであるため、特定の Web ページにアクセスしなくてもタブを開くと、ブラウザはこのタブの BOM オブジェクト (履歴オブジェクトなど) を作成し、新しいオプション カードの空白ページが履歴の最初のレコードとして使用されます。したがって、上の図の最後の列には 8 つのレコードが表示されます。これは、デモ ページに表示されている数と同じです。

ブラウザには、履歴スタックに加えて、履歴スタック内の現在の Web ページの位置を示すアクセス ポインターもあります。デフォルトでは、上記の方法で Web ページのアドレスを変更すると、上図に示すように、新しいページが履歴スタックの一番上にプッシュされ、ポインターは最新の Web ページを指します。ページが変更されると、ブラウザの進むおよび戻る機能 (ボタン、ショートカット、右クリック メニューなどを含む) または提供される go を使用するとき、現在のページのポインタは常に履歴スタックの先頭にあるレコードを指します。 /back/forward メソッドは履歴スタックの内容を変更せず、ポインターを移動するだけです:

1) forward 関数/go(1)/forward はポインタを 1 位置だけ上に移動します。

2) reverse 関数/go(-1)/forward は、ポインターを 1 位置下に移動するだけです。

3) go(n) はポインタを n 位置上に移動し、go(-n) はポインタを n 位置下に移動します。

ブラウザは履歴スタックで Web ページを見つけ、移動されたポインターの位置に基づいて表示します。

の結果をテストするために

操作を実行し続ける場合は、引き続き次の操作を実行します。

動作テスト2:

ブラウザの戻るボタンを7回クリックします。

この時、ブラウザの履歴スタックの保存状況は以下の状態になります:

history.go(n)、history.go(-n)は任意の位置にポインタを移動できますが、移動する位置が履歴スタックの位置範囲を超える場合、ポインタは移動しません。そのため、動作テスト 2 の結果では、history.go(-100) とhistory.go(100) の呼び出しは機能しません。

履歴スタックの内容を変更する状況が他に 2 つあります。

動作テスト 3: 動作テスト 2 の結果に従い、進むボタンを 3 回クリックすると、ブラウザの履歴スタックは次の状態になります:

この時点では、操作テスト 2 も操作テスト 3 も履歴スタックの内容を変更していないため、正しければ、ページ上の履歴統計は 8 のままであるはずです。

操作テスト 4: 次に、次の 2 つの手順を実行します: [demo2.html] をクリックし、[demo3.html] をクリックします。この時点で、ページ上の履歴統計は次のようになります:

history.length が変更されました。これは、履歴スタックの内容も変更されたことを示しています。しかし、なぜ 10 (8+2) ではなく 6 になるのでしょうか?この時点でのブラウザ履歴スタックの状態を見てください:

ブラウザが新しいレコードを履歴スタックにプッシュするとき、現在のポインターの後ろに他のレコード項目がある場合、それらは破棄されます。これにより、操作テスト 4 後の履歴レコードの総数が 6 つだけである理由が容易に理解できます。

ブラウザの履歴レコード管理におけるもう 1 つの重要なポイントは、保存される履歴スタックの総数に制限があることです。Chrome と Firefox はどちらも 50 です。履歴スタックのストレージ量がこの制限を超えると、履歴レコードのストレージはローリング方式で格納されます。つまり、新しいレコードがスタックの一番上にプッシュされ、一番下のレコードが一番下から削除されます。スタックの。デモページ上でdemo1、demo2、demo3、demo4を切り替えてクリックし続けると、一定回数に達するとページに印刷されている統計情報が変化しなくなり、履歴の上限に達したことになります。ただし、IE11 では 100 を超えるまでクリックしたところ、まだ変化していることがわかり、IE の制限がより高いかどうかを示しています。 。

この記事にはブラウザの履歴管理に関する内容が含まれているため、分析に不備がある可能性があります。ご批判や修正をお待ちしております。上記の内容が、歴史と州への理解を深める必要がある友人たちに役立つことを願っています:)

。