1. ホーム
  2. browser

[解決済み] Webブラウザの「戻る」ボタンはどのように機能するのですか?

2023-03-12 17:23:44

質問

この質問についてウェブで検索してみましたが、何も見つかりませんでした。

戻るボタンのロジックは何ですか?ウェブブラウザで戻るボタンを押すと、何が起こるのでしょうか?

本当にそれについてもっと理解したいです。

ありがとうございました。

どのように解決するのですか?

Web ブラウザは、そのウィンドウで訪問した Web ページのスタック (またはリスト、とも言う) を保持します。たとえば、あなたのホームページが google.com で、そこから youtube.com、yahoo.com、cnn.com といったいくつかの Web サイトにアクセスしたとします。最後の1つを訪問すると、リストは次のようになります。

google.com -> youtube.com -> yahoo.com -> cnn.com
                                            ^
                                            |
                                       current page

戻るボタンを押すと、ブラウザはこのように一覧の前のページに戻ってきます。

google.com -> youtube.com -> yahoo.com -> cnn.com
                                ^
                                |
                           current page

この時点で、もう一度 Back を押して youtube.com に移動するか、Forward を押して cnn.com に戻ります。2回目にBackを押したとしましょう。

google.com -> youtube.com -> yahoo.com -> cnn.com
                   ^
                   |
              current page

今、例えばabc.comにアクセスすると、リストはこのように変化します。

google.com -> youtube.com -> abc.com
                               ^
                               |
                          current page

yahoo.comとcnn.comの両方がリストから消えていることに注意してください。これは、あなたが新しいルートを取ったからです。ブラウザは、あなたが現在いる場所に到達するために訪れたページのリストを保持するだけで、あなたがこれまでに訪れたすべてのページの履歴を保持するわけではありません。また、ブラウザは、訪問しているサイトの構造について何も知らないので、意外な動作をすることがあります。

あなたは、商品のカテゴリとサブカテゴリを持つショッピング サイト (短い例として ne.com) を閲覧しています。サイト デザイナーは思慮深く パンくず が表示され、カテゴリを移動することができます。サイトのトップ ページから、[Hardware]、[Memory] の順にクリックします。すると、一覧はこのようになります。

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem
                                           ^
                                           |
                                      current page

ハードウェアのカテゴリに戻りたいので、戻るボタンではなく、パンくずを使って親カテゴリに移動します。これで、ブラウザーのリストは次のようになります。

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem -> ne.com/hw
                                                          ^
                                                          |
                                                     current page

サイト構造によれば、あなたは後方に(レベルを上げて)移動しましたが、ブラウザにとっては、リンクをクリックしたために前方に移動したことになります。リンクをクリックしたり、アドレス バーに URL を入力したりすると、そのリンクがすでに行ったことのあるページに移動するかどうかにかかわらず、ブラウザに関する限り、常に前進することになります。

最後に、メインサイトのページ (ne.com) に戻りたいとします。パンくずリストを使うこともできますが、今回は [戻る] ボタンをクリックします。しかし、どこに行くのでしょうか?

多くのユーザー (私も含めて、まさにこれを実行したとき) は、1 レベル下の [記憶] カテゴリに戻ることに、最初は戸惑います。ページのリストを見れば、その理由はすぐにわかります。

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem -> ne.com/hw
                                            ^
                                            |
                                       current page

戻る] ボタンだけを使ってメイン ページに戻るには、さらに 2 回押してハードウェアのカテゴリに戻り、最後にメイン ページに戻る必要があります。私たちプログラマーにとっては、何が起こっているのかとても明白に思えますが、一般ユーザーは、ブラウザが、たまたま見ていた Web サイトの階層構造について何も知らないことに気づかないため、常に驚かされています。

もしブラウザが、サイト デザイナーに、戻るボタンが現在のものでなく、明白なこと (レベルを上げる) をするようにプログラムさせたら、素晴らしいことでしょうか。

編集: コメントした人は、ブラウザがページを再ロードするのか、それとも単にローカル キャッシュから表示するのかについて質問しました。

答えは「場合による」です。サイト デザイナーは、ブラウザがページをキャッシュするかどうかを指定できます。非キャッシュとして設定されたページでは、ブラウザは、最初にアクセスしたときと同じように、戻るを押したときにサーバーからページを再読み込みします。キャッシュされたページでは、ブラウザはキャッシュからページを表示し、より高速に表示されます。