search
LoginSignup
16

More than 1 year has passed since last update.

posted at

ブラウザバックでのページ表示時処理

ブラウザバックで動くJSの処理について質問されて、正確な情報を伝えられなかったのがきっかけで掘り下げました。

ページ表示時に動くJS処理は何があるか?

イベント 内容
DOMContentLoaded HTML解析完了時
load 全リソースの読み込み完了時(キャッシュの場合は対象外)
pageshow 全リソースの読み込み完了時(キャッシュの場合も対象)

参考:ブラウザ関連のJavaScript - Qiita
ちなみに呼ばれる順番は、①DOMContentLoaded → ②load → ③pageshowです。

各ブラウザでのブラウザバックで動くJS処理

確認方法

A.html
↓ リンク押下
B.html
↓ ブラウザバック
A.html ←このタイミングで動くページ表示時処理

キャッシュから表示された場合

image.png
Firefox、Safariは、キャッシュから復元されるとDOMContentLoaded, loadが動かない。
リクエストはキャッシュから復元されているので送らない。

キャッシュされないように指定した場合(cache-control: no-cacheをレスポンスに指定)

image.png
Firefoxは、キャッシュから復元されたかの有無でDOMContentLoaded, loadが動いたり・動かなかったりする。

(2021年06月06日時点)
Safariは、cache-control: no-cacheを指定してもキャッシュから復元してしまう。
【Safari】no-store がついていてもbfcacheが有効になる - UGA Boxxx

pageshowイベント

ブラウザバックで安定して呼ばれるのは、pageshowイベント。
pageshowイベントの引数でPageTransitionEventを受け取ります。
PageTransitionEvent.persistedのtrue or falseでキャッシュから表示されているのかを判定できます。

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    console.log('キャッシュから表示');
  } else {
    console.log('新しいページを受信して表示');
  }
});

Window: pageshow イベント - Web API | MDN
PageTransitionEvent.persisted - Web APIs | MDN

ブラウザバックに関連するキーワード

bfcache

bfcacheは、Back Forward Cacheのこと。
Firefox 1.5では、訪問したページ全体をJavaScriptの状態も含めてメモリ内にキャッシュすることで、ページ間の戻る、進む時のページロードが不要にしている。
Using Firefox 1.5 caching - Mozilla | MDN

HTTPヘッダ cache-control: no-cache

レスポンスのHTTPヘッダにcache-control: no-cacheを指定するとブラウザにキャッシュさせたくないことを指定できる。

no-store:
 レスポンスをキャッシュに保存することはできません。他のディレクティブを設定することもできますが、最近のブラウザーではレスポンスがキャッシュされることを防ぐために必要なディレクティブはこれだけです。
Cache-Control - HTTP | MDN

まとめ

現状はブラウザバック後でも、動かしたいJSの初期処理がある場合はpageshowイベントを使う方が望ましい。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
16