0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 22

Tips カレンダー Advent Calendar 2025

@ko-tarou

Webページが表示されるまで 12

0
Posted at

結論：1つのクリック、数千の工程

「Webページが表示されるまで」の物語を追ってきましたが、その複雑さは想像を絶するものです。

  1. Network: URL解析 → DNS(再帰解決) → TCP/TLS(ハンドシェイク) → HTTP(ストリーム)
  2. Parsing: HTML/CSS → DOM/CSSOM (字句解析・構築)
  3. Rendering: Render Tree(マッチング) → Layout(幾何計算) → Paint(描画命令)
  4. Compositing: Layerize(レイヤー分け) → Rasterize(タイル・GPU) → Composite(合成)
    これらすべての工程が、数秒、あるいは数百ミリ秒という瞬きするほどの時間内に行われているのです。私たちWebエンジニアが書く1行のコード、1つの画像圧縮、1つのCSSプロパティの選択が、この巨大なパイプラインのどこかに影響を与え、最終的にユーザー体験を左右します。

本稿が、Webのパフォーマンスチューニングに挑む際の地図となり、ブラウザというブラックボックスを照らす灯りとなれば幸いです。

付録：Webパフォーマンスを可視化・分析するためのツール

ツール名 用途・特徴 関連フェーズ
Chrome DevTools (Network) リクエストのタイミング、プロトコル(h2/h3)、TTFBの確認 Network
Chrome DevTools (Performance) メインスレッドの負荷、Layout/Paintの発生、フレームレートの分析 Rendering, Scripting
Chrome DevTools (Layers) レイヤーの構成、プロモーションの理由、メモリ使用量の3D可視化 Compositing 34
Lighthouse パフォーマンススコアの計測、改善提案の自動生成 (LCP, CLS, TBTなど) All
WebPageTest 実機・実回線での詳細なウォーターフォール分析、映像記録 Network, Rendering
dig / kdig DNS解決のトレース (dig +trace)、DNSレコードの確認 DNS 35
Wireshark パケットレベルでのTCP/TLSハンドシェイク、QUICパケットの解析 Network (Low Level)

引用文献

  1. Qiita殿堂入りアプリを作りました（二番煎じ）, 12月 11, 2025にアクセス、 https://qiita.com/matt-note/items/c5056d192dd768b96e79
  2. 伝えたい人に届ける技術記事の書き方 - Qiita, 12月 11, 2025にアクセス、 https://qiita.com/MinoDriven/items/6718b5e70e3fb321ff9b
  3. Qiita初心者ガイド：記事投稿から活用方法まで徹底解説 | DYM CAREER, 12月 11, 2025にアクセス、 https://portal.dymcareer.jp/column/engineer/qiita
  4. Qiitaで記事を書く前に押さえておきたい４つのポイント！記事の効率的な書き方, 12月 11, 2025にアクセス、 https://qiita.com/hiiragiya/items/be02b2d7cfaea4977473
  5. Inside the Browser Rendering Pipeline - AG, 12月 11, 2025にアクセス、 https://aleksandargjoreski.dev/blog/browser-rendering-pipeline/
  6. Compositor Thread Architecture - The Chromium Projects, 12月 11, 2025にアクセス、 https://www.chromium.org/developers/design-documents/compositor-thread-architecture/
  7. How cc Works - Chromium Docs, 12月 11, 2025にアクセス、 https://chromium.googlesource.com/chromium/src/+/lkgr/docs/how_cc_works.md
  8. What happens in a TLS handshake? | SSL handshake - Cloudflare, 12月 11, 2025にアクセス、 https://www.cloudflare.com/learning/ssl/what-happens-in-a-tls-handshake/
  9. TLS 1.2 vs TLS 1.3: Key Differences, Security Enhancements, and Why Migration Matters | by Anil Goyal | Medium, 12月 11, 2025にアクセス、 https://medium.com/@anil.goyal0057/what-is-https-441e1cd97e83
  10. DNS Resolution Process | Cycle.io, 12月 11, 2025にアクセス、 https://cycle.io/learn/dns-resolution-process
  11. What Does DNS Do and How Does It Work? - Liquid Web, 12月 11, 2025にアクセス、 https://www.liquidweb.com/blog/how-to-demystify-the-dns-process/
  12. How DNS Works: Step-by-Step Resolution Process - ServerAvatar, 12月 11, 2025にアクセス、 https://serveravatar.com/how-dns-works/
  13. How DNS Works: A Guide to Understanding the Internet's Address Book - freeCodeCamp, 12月 11, 2025にアクセス、 https://www.freecodecamp.org/news/how-dns-works-the-internets-address-book/
  14. What Is DNS? Definition, How It Works Step-by-Step, Securitydns protection, 12月 11, 2025にアクセス、 https://heimdalsecurity.com/blog/what-is-dns/
  15. Tracing DNS Delegation with Dig (2560) - Infoblox Education, 12月 11, 2025にアクセス、 https://docs.education.infoblox.com/lab/2560
  16. TCP handshake - Glossary - MDN Web Docs, 12月 11, 2025にアクセス、 https://developer.mozilla.org/en-US/docs/Glossary/TCP_handshake
  17. Understanding the TCP/IP 3-Way Handshake - CloudMyLab Blog, 12月 11, 2025にアクセス、 https://blog.cloudmylab.com/tcp-ip-3-way-handshake
  18. Key differences Between TLS 1.2 and TLS 1.3 | Glossary | A10 Networks, 12月 11, 2025にアクセス、 https://www.a10networks.com/glossary/key-differences-between-tls-1-2-and-tls-1-3/
  19. TLS 1.2 vs. 1.3—Handshake, Performance, and Other Improvements - Catchpoint, 12月 11, 2025にアクセス、 https://www.catchpoint.com/http2-vs-http3/tls1-2-vs-1-3
  20. Differences Between TLS 1.2 and TLS 1.3 - GeeksforGeeks, 12月 11, 2025にアクセス、 https://www.geeksforgeeks.org/computer-networks/differences-between-tls-1-2-and-tls-1-3/
  21. The TLS Handshake Explained - Auth0, 12月 11, 2025にアクセス、 https://auth0.com/blog/the-tls-handshake-explained/
  22. Comparing HTTP/3 vs. HTTP/2 Performance - The Cloudflare Blog, 12月 11, 2025にアクセス、 https://blog.cloudflare.com/http-3-vs-http-2/
  23. HTTP/3 vs. HTTP/2 — A detailed comparison - Catchpoint, 12月 11, 2025にアクセス、 https://www.catchpoint.com/http3-vs-http2
  24. HTTP/2 guide - Apache HTTP Server Version 2.4, 12月 11, 2025にアクセス、 https://httpd.apache.org/docs/2.4/howto/http2.html
  25. How does browser know which version of HTTP it should use when sending a request?, 12月 11, 2025にアクセス、 https://superuser.com/questions/1659248/how-does-browser-know-which-version-of-http-it-should-use-when-sending-a-request
  26. Why HTTP/3 Was Invented: Solving Head-of-Line Blocking in HTTP/2 | by Ahmad Bilal, 12月 11, 2025にアクセス、 https://medium.com/@ahmadbilalch891/why-http-3-was-invented-solving-head-of-line-blocking-in-http-2-daffac76ba01
  27. HTTP/3 in the Wild: Why It Beats HTTP/2 Where It Matters Most - The New Stack, 12月 11, 2025にアクセス、 https://thenewstack.io/http-3-in-the-wild-why-it-beats-http-2-where-it-matters-most/
  28. HTTP vs. HTTP/2 vs. HTTP/3: What's the Difference? - PubNub, 12月 11, 2025にアクセス、 https://www.pubnub.com/blog/http-vs-http-2-vs-http-3-whats-the-difference/
  29. Populating the page: how browsers work - Performance - MDN Web Docs, 12月 11, 2025にアクセス、 https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/How_browsers_work
  30. How Browsers Work — A Deep Dive into the Rendering Pipeline - DEV Community, 12月 11, 2025にアクセス、 https://dev.to/anpet9779/how-browsers-work-a-deep-dive-into-the-rendering-pipeline-1gjg
  31. What is Chrome's rendering pipeline, and how does it optimize page painting?, 12月 11, 2025にアクセス、 https://support.google.com/chrome/thread/346713355/what-is-chrome%E2%80%99s-rendering-pipeline-and-how-does-it-optimize-page-painting?hl=en
  32. Part 2 : How Browsers Render Pages - A Frontend Developer's Guide to the Rendering Pipeline - Aabir Hassan, 12月 11, 2025にアクセス、 https://aabir-hassan.medium.com/part-2-how-browsers-render-pages-a-frontend-developers-guide-to-the-rendering-pipeline-29599fd97637
  33. An Introduction to the Browser Rendering Pipeline - Web Performance Tips, 12月 11, 2025にアクセス、 https://webperf.tips/tip/browser-rendering-pipeline/
  34. Layers panel: Explore the layers of your website | Chrome DevTools, 12月 11, 2025にアクセス、 https://developer.chrome.com/docs/devtools/layers
  35. What is Dig +Trace? - IBM, 12月 11, 2025にアクセス、 https://www.ibm.com/think/topics/using-dig-trace
  36. dig Command in Linux with Examples - GeeksforGeeks, 12月 11, 2025にアクセス、 https://www.geeksforgeeks.org/linux-unix/dig-command-in-linux-with-examples/
0
0
0

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
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?