[{"data":1,"prerenderedAt":648},["ShallowReactive",2],{"content-/browser-url-to-render":3,"all-pages-for-dir":635,"related-/browser-url-to-render":636,"og-image-/browser-url-to-render":647},{"id":4,"title":5,"body":6,"category":621,"concepts":621,"description":622,"extension":623,"meta":624,"navigation":251,"ogImage":621,"path":625,"project_name":621,"published":626,"publishedAt":627,"seo":628,"source":621,"stem":629,"tags":630,"todo":621,"unpublished":626,"updatedAt":627,"__hash__":634},"pages/2025-12/2025-12-19/browser-url-to-render.md","ブラウザでURLを叩いて表示されるまでに何が起きているか",{"type":7,"value":8,"toc":593},"minimark",[9,13,17,21,25,29,32,43,47,50,54,93,99,103,106,112,116,119,125,129,186,190,213,217,263,267,274,278,284,299,303,309,312,316,338,342,345,362,366,369,383,387,390,398,402,405,420,423,429,432,435,449,452,470,473,500,503,586,589],[10,11,5],"h1",{"id":12},"ブラウザでurlを叩いて表示されるまでに何が起きているか",[14,15,16],"p",{},"技術面接の定番質問である。ネットワークからブラウザレンダリングまでの理解度が問われる。",[18,19,20],"h2",{"id":20},"全体の流れ",[22,23],"drawio-viewer",{"src":24},"/2025-12-19/browser-url-to-render.drawio",[18,26,28],{"id":27},"_1-url解析","1. URL解析",[14,30,31],{},"ブラウザがURLをパースする。",[33,34,39],"pre",{"className":35,"code":37,"language":38},[36],"language-text","https://example.com:443/path?query=value#hash\n  │        │        │    │      │        │\n  │        │        │    │      │        └─ フラグメント（ブラウザ側のみ）\n  │        │        │    │      └─ クエリ文字列\n  │        │        │    └─ パス\n  │        │        └─ ポート（省略時: http=80, https=443）\n  │        └─ ホスト名\n  └─ スキーム（プロトコル）\n","text",[40,41,37],"code",{"__ignoreMap":42},"",[18,44,46],{"id":45},"_2-dnsルックアップ","2. DNSルックアップ",[14,48,49],{},"ホスト名からIPアドレスを取得する。",[51,52,53],"h3",{"id":53},"解決の順序",[55,56,57,65,75,81,87],"ol",{},[58,59,60,64],"li",{},[61,62,63],"strong",{},"ブラウザキャッシュ"," - 直近のDNS結果をキャッシュ",[58,66,67,70,71,74],{},[61,68,69],{},"OSキャッシュ"," - ",[40,72,73],{},"/etc/hosts"," やOSのDNSキャッシュ",[58,76,77,80],{},[61,78,79],{},"ルーターキャッシュ"," - ルーターが保持するキャッシュ",[58,82,83,86],{},[61,84,85],{},"ISPのDNSサーバー"," - 契約プロバイダのDNS",[58,88,89,92],{},[61,90,91],{},"再帰的DNS問い合わせ"," - ルート → TLD → 権威DNSサーバー",[33,94,97],{"className":95,"code":96,"language":38},[36],"ブラウザ → ISP DNS → ルートDNS（.）\n                    → TLD DNS（.com）\n                    → 権威DNS（example.com）\n                    ← IPアドレス返却\n",[40,98,96],{"__ignoreMap":42},[18,100,102],{"id":101},"_3-tcp接続3ウェイハンドシェイク","3. TCP接続（3ウェイハンドシェイク）",[14,104,105],{},"信頼性のある接続を確立する。",[33,107,110],{"className":108,"code":109,"language":38},[36],"クライアント          サーバー\n    │                   │\n    │── SYN ──────────→│  1. 接続要求\n    │                   │\n    │←─── SYN-ACK ─────│  2. 要求受諾 + 接続要求\n    │                   │\n    │── ACK ──────────→│  3. 接続確立\n    │                   │\n",[40,111,109],{"__ignoreMap":42},[18,113,115],{"id":114},"_4-tlsハンドシェイクhttpsの場合","4. TLSハンドシェイク（HTTPSの場合）",[14,117,118],{},"暗号化通信を確立する。TLS 1.3では1-RTTに短縮。",[33,120,123],{"className":121,"code":122,"language":38},[36],"クライアント                サーバー\n    │                         │\n    │── ClientHello ────────→│  対応暗号スイート提示\n    │                         │\n    │←─── ServerHello ───────│  暗号スイート決定\n    │←─── Certificate ───────│  サーバー証明書\n    │←─── ServerHelloDone ───│\n    │                         │\n    │── ClientKeyExchange ──→│  共有鍵生成用データ\n    │── ChangeCipherSpec ───→│  暗号化開始通知\n    │── Finished ───────────→│\n    │                         │\n    │←─── ChangeCipherSpec ──│\n    │←─── Finished ──────────│\n    │                         │\n    │  ★ 暗号化通信開始 ★      │\n",[40,124,122],{"__ignoreMap":42},[18,126,128],{"id":127},"_5-httpリクエスト送信","5. HTTPリクエスト送信",[33,130,134],{"className":131,"code":132,"language":133,"meta":42,"style":42},"language-http shiki shiki-themes vitesse-light vitesse-light","GET /path HTTP/1.1\nHost: example.com\nUser-Agent: Mozilla/5.0 ...\nAccept: text/html,application/xhtml+xml\nAccept-Language: ja,en\nAccept-Encoding: gzip, deflate, br\nConnection: keep-alive\nCookie: session_id=abc123\n","http",[40,135,136,144,150,156,162,168,174,180],{"__ignoreMap":42},[137,138,141],"span",{"class":139,"line":140},"line",1,[137,142,143],{},"GET /path HTTP/1.1\n",[137,145,147],{"class":139,"line":146},2,[137,148,149],{},"Host: example.com\n",[137,151,153],{"class":139,"line":152},3,[137,154,155],{},"User-Agent: Mozilla/5.0 ...\n",[137,157,159],{"class":139,"line":158},4,[137,160,161],{},"Accept: text/html,application/xhtml+xml\n",[137,163,165],{"class":139,"line":164},5,[137,166,167],{},"Accept-Language: ja,en\n",[137,169,171],{"class":139,"line":170},6,[137,172,173],{},"Accept-Encoding: gzip, deflate, br\n",[137,175,177],{"class":139,"line":176},7,[137,178,179],{},"Connection: keep-alive\n",[137,181,183],{"class":139,"line":182},8,[137,184,185],{},"Cookie: session_id=abc123\n",[18,187,189],{"id":188},"_6-サーバー処理","6. サーバー処理",[55,191,192,195,198,201,204,207,210],{},[58,193,194],{},"Webサーバー（nginx/Apache）がリクエスト受信",[58,196,197],{},"リバースプロキシ → アプリケーションサーバー",[58,199,200],{},"ルーティング処理",[58,202,203],{},"ビジネスロジック実行",[58,205,206],{},"DBクエリ（必要に応じて）",[58,208,209],{},"テンプレートレンダリング or JSON生成",[58,211,212],{},"レスポンス返却",[18,214,216],{"id":215},"_7-httpレスポンス受信","7. HTTPレスポンス受信",[33,218,220],{"className":131,"code":219,"language":133,"meta":42,"style":42},"HTTP/1.1 200 OK\nContent-Type: text/html; charset=UTF-8\nContent-Encoding: gzip\nCache-Control: max-age=3600\nContent-Length: 12345\n\n\u003C!DOCTYPE html>\n\u003Chtml>...\n",[40,221,222,227,232,237,242,247,253,258],{"__ignoreMap":42},[137,223,224],{"class":139,"line":140},[137,225,226],{},"HTTP/1.1 200 OK\n",[137,228,229],{"class":139,"line":146},[137,230,231],{},"Content-Type: text/html; charset=UTF-8\n",[137,233,234],{"class":139,"line":152},[137,235,236],{},"Content-Encoding: gzip\n",[137,238,239],{"class":139,"line":158},[137,240,241],{},"Cache-Control: max-age=3600\n",[137,243,244],{"class":139,"line":164},[137,245,246],{},"Content-Length: 12345\n",[137,248,249],{"class":139,"line":170},[137,250,252],{"emptyLinePlaceholder":251},true,"\n",[137,254,255],{"class":139,"line":176},[137,256,257],{},"\u003C!DOCTYPE html>\n",[137,259,260],{"class":139,"line":182},[137,261,262],{},"\u003Chtml>...\n",[18,264,266],{"id":265},"_8-ブラウザレンダリング","8. ブラウザレンダリング",[14,268,269,270,273],{},"ここからがブラウザ内部の処理。",[61,271,272],{},"クリティカルレンダリングパス","と呼ばれる。",[51,275,277],{"id":276},"_81-htmlパース-domツリー構築","8.1 HTMLパース → DOMツリー構築",[33,279,282],{"className":280,"code":281,"language":38},[36],"バイト → 文字 → トークン → ノード → DOMツリー\n",[40,283,281],{"__ignoreMap":42},[14,285,286,287,290,291,294,295,298],{},"HTMLを上から順にパース。",[40,288,289],{},"\u003Cscript>","タグに遭遇するとパースをブロック（",[40,292,293],{},"async","/",[40,296,297],{},"defer","がない場合）。",[51,300,302],{"id":301},"_82-cssパース-cssomツリー構築","8.2 CSSパース → CSSOMツリー構築",[33,304,307],{"className":305,"code":306,"language":38},[36],"バイト → 文字 → トークン → ノード → CSSOMツリー\n",[40,308,306],{"__ignoreMap":42},[14,310,311],{},"CSSはレンダリングブロッキング。CSSOMが完成するまでレンダリングは待機。",[51,313,315],{"id":314},"_83-javascriptの実行","8.3 JavaScriptの実行",[317,318,319,328,333],"ul",{},[58,320,321,324,325,327],{},[61,322,323],{},"パーサーブロッキング",": 通常の",[40,326,289],{},"はDOM構築を止める",[58,329,330,332],{},[61,331,293],{},": ダウンロード完了次第実行（順序保証なし）",[58,334,335,337],{},[61,336,297],{},": DOMパース完了後に順序通り実行",[51,339,341],{"id":340},"_84-レンダーツリー構築","8.4 レンダーツリー構築",[14,343,344],{},"DOMツリー + CSSOMツリー → レンダーツリー",[317,346,347,350,356],{},[58,348,349],{},"表示されるノードのみ含む",[58,351,352,355],{},[40,353,354],{},"display: none","は含まれない",[58,357,358,361],{},[40,359,360],{},"visibility: hidden","は含まれる（スペースを占有）",[51,363,365],{"id":364},"_85-レイアウトリフロー","8.5 レイアウト（リフロー）",[14,367,368],{},"各ノードの正確な位置とサイズを計算。",[317,370,371,374,380],{},[58,372,373],{},"ビューポートサイズを基準に計算",[58,375,376,379],{},[40,377,378],{},"%","指定は親要素から算出",[58,381,382],{},"コストが高い処理（DOM変更で再計算が走る）",[51,384,386],{"id":385},"_86-ペイント","8.6 ペイント",[14,388,389],{},"レンダーツリーを実際のピクセルに変換。",[317,391,392,395],{},[58,393,394],{},"背景色、テキスト、ボーダーなどを描画",[58,396,397],{},"複数のレイヤーに分けて描画される",[51,399,401],{"id":400},"_87-コンポジット","8.7 コンポジット",[14,403,404],{},"複数のレイヤーを合成して最終的な画面を生成。",[317,406,407,417],{},[58,408,409,412,413,416],{},[40,410,411],{},"transform","や",[40,414,415],{},"opacity","はコンポジット層で処理（高速）",[58,418,419],{},"GPU加速が効く",[18,421,422],{"id":422},"レンダリングパイプライン図",[33,424,427],{"className":425,"code":426,"language":38},[36],"         ┌─────────────────────────────────────────────────────────┐\n         │                  Critical Rendering Path                 │\n         └─────────────────────────────────────────────────────────┘\n\n   HTML  ─→  DOM  ─────────────────────────┐\n                                           │\n                                           ├─→ Render Tree ─→ Layout ─→ Paint ─→ Composite\n                                           │\n   CSS   ─→  CSSOM ────────────────────────┘\n\n   JS    ─→  DOM/CSSOM操作 ─→ 上記パイプラインを再実行（部分的に）\n",[40,428,426],{"__ignoreMap":42},[18,430,431],{"id":431},"面接での回答ポイント",[51,433,434],{"id":434},"ネットワーク層について問われたら",[317,436,437,440,443,446],{},[58,438,439],{},"DNS解決のキャッシュ階層",[58,441,442],{},"TCP 3ウェイハンドシェイク",[58,444,445],{},"TLSの役割と1-RTT化（TLS 1.3）",[58,447,448],{},"HTTP/2, HTTP/3（QUIC）の違い",[51,450,451],{"id":451},"レンダリングについて問われたら",[317,453,454,456,459,462],{},[58,455,272],{},[58,457,458],{},"パーサーブロッキング vs レンダーブロッキング",[58,460,461],{},"リフロー・リペイントのコスト",[58,463,464,466,467,469],{},[40,465,293],{}," / ",[40,468,297],{}," の違い",[51,471,472],{"id":472},"パフォーマンス改善について問われたら",[317,474,475,482,488,491,497],{},[58,476,477,478,481],{},"DNSプリフェッチ（",[40,479,480],{},"\u003Clink rel=\"dns-prefetch\">","）",[58,483,484,485,481],{},"プリコネクト（",[40,486,487],{},"\u003Clink rel=\"preconnect\">",[58,489,490],{},"CSSをhead、JSをbody末尾に",[58,492,493,494,481],{},"画像の遅延読み込み（",[40,495,496],{},"loading=\"lazy\"",[58,498,499],{},"Core Web Vitals（LCP, FID, CLS）",[18,501,502],{"id":502},"まとめ",[504,505,506,519],"table",{},[507,508,509],"thead",{},[510,511,512,516],"tr",{},[513,514,515],"th",{},"フェーズ",[513,517,518],{},"主な処理",[520,521,522,530,538,546,554,562,570,578],"tbody",{},[510,523,524,527],{},[525,526,28],"td",{},[525,528,529],{},"スキーム、ホスト、パスに分解",[510,531,532,535],{},[525,533,534],{},"2. DNS",[525,536,537],{},"ホスト名 → IPアドレス",[510,539,540,543],{},[525,541,542],{},"3. TCP",[525,544,545],{},"3ウェイハンドシェイクで接続確立",[510,547,548,551],{},[525,549,550],{},"4. TLS",[525,552,553],{},"暗号化通信の確立",[510,555,556,559],{},[525,557,558],{},"5. HTTP",[525,560,561],{},"リクエスト送信",[510,563,564,567],{},[525,565,566],{},"6. サーバー",[525,568,569],{},"ルーティング、DB、レスポンス生成",[510,571,572,575],{},[525,573,574],{},"7. レスポンス",[525,576,577],{},"HTML/CSS/JS等を受信",[510,579,580,583],{},[525,581,582],{},"8. レンダリング",[525,584,585],{},"DOM→CSSOM→レンダーツリー→レイアウト→ペイント→コンポジット",[14,587,588],{},"各フェーズの詳細も説明できるようにしつつ、全体を俯瞰しておくとよい。",[590,591,592],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":42,"searchDepth":146,"depth":146,"links":594},[595,596,597,600,601,602,603,604,605,614,615,620],{"id":20,"depth":146,"text":20},{"id":27,"depth":146,"text":28},{"id":45,"depth":146,"text":46,"children":598},[599],{"id":53,"depth":152,"text":53},{"id":101,"depth":146,"text":102},{"id":114,"depth":146,"text":115},{"id":127,"depth":146,"text":128},{"id":188,"depth":146,"text":189},{"id":215,"depth":146,"text":216},{"id":265,"depth":146,"text":266,"children":606},[607,608,609,610,611,612,613],{"id":276,"depth":152,"text":277},{"id":301,"depth":152,"text":302},{"id":314,"depth":152,"text":315},{"id":340,"depth":152,"text":341},{"id":364,"depth":152,"text":365},{"id":385,"depth":152,"text":386},{"id":400,"depth":152,"text":401},{"id":422,"depth":146,"text":422},{"id":431,"depth":146,"text":431,"children":616},[617,618,619],{"id":434,"depth":152,"text":434},{"id":451,"depth":152,"text":451},{"id":472,"depth":152,"text":472},{"id":502,"depth":146,"text":502},null,"URLを入力してからWebページが表示されるまでの一連の流れを解説","md",{},"/browser-url-to-render",false,"2025-12-19T00:00:00.000Z",{"title":5,"description":622},"2025-12/2025-12-19/browser-url-to-render",[631,632,633],"browser","networking","web","0mIQF9EQXjiW5dTLYW2GTuHOrbHuW0Kb9uIwR9q_DiY",[],[637,640,643],{"title":638,"path":639,"publishedAt":627},"個人開発で意識したセキュリティ対策","/security-for-indie-dev",{"title":641,"path":642,"publishedAt":627},"サイトが検索で上位に出ない時に考えること","/seo-ranking-troubleshoot",{"title":644,"path":645,"publishedAt":646},"WAV・MP3・Opus - Webに最適なオーディオフォーマットは？","/wav-vs-mp3","2025-12-12T00:00:00.000Z","https://log.eurekapu.com/og/blog/browser-url-to-render.png?v=2025-12-19T00%3A00%3A00.000Z&title=%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7URL%E3%82%92%E5%8F%A9%E3%81%84%E3%81%A6%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E3%81%BE%E3%81%A7%E3%81%AB%E4%BD%95%E3%81%8C%E8%B5%B7%E3%81%8D%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B&author=Kei%20Komatsu&sig=1098119fa49e6304",1785654977032]