背景
お客様PJの保守を実施する中、「ユーザー側のネットワークの速度により、画面表示前の処理がおかしくなったりしてる」と調査依頼が来ました。
事象やその原因を大体理解できたが、お客様に説明するため調べた資料をブログ化しようと思います。
Webページが見えるまでのブラウザ側動作と注意点
ネットワークが速い場合、ユーザーがURLを打ってすぐにページが見れたと思いますが、実は裏でブラウザがいろんな仕事をやってくれました。
DNS解決 (DNS Resolution)
ブラウザはリクエストするドメイン名をIPアドレスに変換します。
TCP接続 (TCP Connection)
ブラウザはサーバーとTCP接続を確立します。この過程で三者ハンドシェイク（SYN, SYN-ACK, ACK）が行われます。
SSL/TLSハンドシェイク (SSL/TLS Handshake)（HTTPSの場合）
セキュアな接続が必要な場合、ブラウザとサーバー間でSSL/TLSハンドシェイクが行われ、暗号化通信が確立されます。
HTTPリクエスト送信 (Sending HTTP Request)
ブラウザはサーバーに対してHTTPリクエストを送信します。リクエストにはメソッド（GET, POSTなど）、ヘッダー情報、および必要に応じてペイロードが含まれます。
このタイミングでようやくサーバーに一回目のリクエストを出しました！！！
サーバー応答待ち (Waiting for Server Response)
ブラウザはサーバーからの応答を待ちます。
HTTP応答受信 (Receiving HTTP Response)
サーバーからのHTTP応答を受け取ります。応答にはステータスコード（200 OK、404 Not Foundなど）、ヘッダー情報、および必要に応じてボディが含まれます。
一回目のレスポンスが来ました！！！
（index.htmlとかのトップページ）
（CSSやJSなどはまだ来ていないよ！！！）
HTML解析とレンダリング (HTML Parsing and Rendering)
受け取ったHTMLドキュメントを解析し、DOM（Document Object Model）ツリーを構築します。
受け取ったトップページのhtmlを解析し、タグの構成のよりDOMツリーを作る
DOMContentLoadedイベント発生
HTML の文書が完全に読み込まれ構文解析され、すべての遅延スクリプトがダウンロードされ、実行されたときに発生します。画像、サブフレーム、非同期スクリプトの読み込みの完了は待ちません。
html
リソースリクエスト (Resource Requests)
HTML内の追加リソース（CSS、JavaScript、画像など）を取得するための追加リクエストを発行します。
linkタグやscriptタグ、imgタグなど外部ファイルに遭遇する場合、再度サーバーにアクセスしてファイルを要求する
（リクエストは一回で終わりではなく、複数回わけて実施するよ！！！）
ネットワークが速い環境にいると、一瞬でレスポンスを帰ってくるように見えるけど、もしネットワークが遅い環境だと、各ファイルの到着に時間差が生じてしまう可能性がある。JSファイルは通常CSSファイルにより大きいので、より遅いかもしれない。
CSS解析と適用 (CSS Parsing and Application)
取得したCSSファイルを解析し、スタイル情報を適用します。
もしCSSの到着がJSより早い場合、画面の描画が先にできてしまうかもしれない。
（JSでなんらかの前処理を画面表示前に実施する仕様となると、こちらで引っかかってしまうかも、要注意！！！）
JavaScript実行 (JavaScript Execution)
取得したJavaScriptファイルを実行します。JavaScriptはDOMを操作したり、追加のリソースをリクエストしたりすることができます。
レンダリング (Rendering)
DOMツリーとスタイル情報をもとにページのレイアウトを計算し、レンダリングします。
ブラウザはなるはやユーザーに画面を見せる仕組みなので、全ファイルが到着してから描画するのではなく、同時並行で仕事して少しずつ画面を作ってくれる
（一瞬CSSが全然入っていない骨のような画面構成が見えてしまうかもしれないので、要注意！！！）
ユーザーインタラクション待ち (Waiting for User Interaction)
ページが完全にロードされ、ユーザーがページとインタラクションできるようになります。
pageshow イベント発生
ページが表示された直後に発生
（ブラウザーがウィンドウの文書を表示したとき）
・最初にページを読み込んだとき
・同じウィンドウまたはタブの中で、他のページからそのページへ移動してきたとき
・モバイル OS で凍結されたページを復元したとき
・ブラウザーの進む、戻るボタンを利用してこのページに戻ったとき
※ ページがキャッシュから復元された場合にも発生するため、ページが再表示されたことを検知できる
load イベント発生
ページの全てのリソースが読み込まれた後に発生
（スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたとき）
※ ページがキャッシュから復元された場合には発生しない
参考資料