背景

お客様PJの保守を実施する中、「ユーザー側のネットワークの速度により、画面表示前の処理がおかしくなったりしてる」と調査依頼が来ました。

事象やその原因を大体理解できたが、お客様に説明するため調べた資料をブログ化しようと思います。

Webページが見えるまでのブラウザ側動作と注意点

ネットワークが速い場合、ユーザーがURLを打ってすぐにページが見れたと思いますが、実は裏でブラウザがいろんな仕事をやってくれました。

ブラウザはリクエストするドメイン名をIPアドレスに変換します。

ブラウザはサーバーとTCP接続を確立します。この過程で三者ハンドシェイク（SYN, SYN-ACK, ACK）が行われます。

セキュアな接続が必要な場合、ブラウザとサーバー間でSSL/TLSハンドシェイクが行われ、暗号化通信が確立されます。

ブラウザはサーバーに対してHTTPリクエストを送信します。リクエストにはメソッド（GET, POSTなど）、ヘッダー情報、および必要に応じてペイロードが含まれます。

このタイミングでようやくサーバーに一回目のリクエストを出しました！！！

ブラウザはサーバーからの応答を待ちます。

サーバーからのHTTP応答を受け取ります。応答にはステータスコード（200 OK、404 Not Foundなど）、ヘッダー情報、および必要に応じてボディが含まれます。

一回目のレスポンスが来ました！！！
（index.htmlとかのトップページ）
（CSSやJSなどはまだ来ていないよ！！！）

受け取ったHTMLドキュメントを解析し、DOM（Document Object Model）ツリーを構築します。

受け取ったトップページのhtmlを解析し、タグの構成のよりDOMツリーを作る

DOMContentLoadedイベント発生

HTML の文書が完全に読み込まれ構文解析され、すべての遅延スクリプトがダウンロードされ、実行されたときに発生します。画像、サブフレーム、非同期スクリプトの読み込みの完了は待ちません。

html

HTML内の追加リソース（CSS、JavaScript、画像など）を取得するための追加リクエストを発行します。

linkタグやscriptタグ、imgタグなど外部ファイルに遭遇する場合、再度サーバーにアクセスしてファイルを要求する
（リクエストは一回で終わりではなく、複数回わけて実施するよ！！！）

ネットワークが速い環境にいると、一瞬でレスポンスを帰ってくるように見えるけど、もしネットワークが遅い環境だと、各ファイルの到着に時間差が生じてしまう可能性がある。JSファイルは通常CSSファイルにより大きいので、より遅いかもしれない。

取得したCSSファイルを解析し、スタイル情報を適用します。

もしCSSの到着がJSより早い場合、画面の描画が先にできてしまうかもしれない。
（JSでなんらかの前処理を画面表示前に実施する仕様となると、こちらで引っかかってしまうかも、要注意！！！）

取得したJavaScriptファイルを実行します。JavaScriptはDOMを操作したり、追加のリソースをリクエストしたりすることができます。

DOMツリーとスタイル情報をもとにページのレイアウトを計算し、レンダリングします。

ブラウザはなるはやユーザーに画面を見せる仕組みなので、全ファイルが到着してから描画するのではなく、同時並行で仕事して少しずつ画面を作ってくれる
（一瞬CSSが全然入っていない骨のような画面構成が見えてしまうかもしれないので、要注意！！！）

ページが完全にロードされ、ユーザーがページとインタラクションできるようになります。

pageshow イベント発生
ページが表示された直後に発生
（ブラウザーがウィンドウの文書を表示したとき）

・最初にページを読み込んだとき
・同じウィンドウまたはタブの中で、他のページからそのページへ移動してきたとき
・モバイル OS で凍結されたページを復元したとき
・ブラウザーの進む、戻るボタンを利用してこのページに戻ったとき

※ ページがキャッシュから復元された場合にも発生するため、ページが再表示されたことを検知できる

load イベント発生
ページの全てのリソースが読み込まれた後に発生
（スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたとき）

※ ページがキャッシュから復元された場合には発生しない