System Design 101: What Happens When You Type a URL in the Address Bar

当你在地址栏中输入 URL 时会发生什么？

Introduction

介绍

When you type a URL into the address bar of your browser, a complex series of steps occur behind the scenes to fetch and display the web page. Understanding this process is crucial for web developers and those interested in how the internet works. The following explanation will break down these steps, covering DNS resolution, TCP/IP connection, HTTP request and response, and the rendering process in the browser.
当你在浏览器的地址栏中输入一个 URL 时，后台会发生一系列复杂的步骤来获取和显示网页。理解这个过程对于网页开发者和对互联网运作方式感兴趣的人来说至关重要。以下解释将详细介绍这些步骤，包括 DNS 解析、TCP/IP 连接、HTTP 请求和响应以及浏览器中的渲染过程。

Step 1: DNS Resolution

步骤 1: DNS 解析

What: DNS (Domain Name System) is the process that translates a human-readable domain name (e.g., www.mypage.com) into an IP address that computers can understand (e.g., 80.162.11.854).
什么: DNS（域名系统）是将人类可读的域名（例如，www.mypage.com）转换为计算机可理解的 IP 地址（例如，80.162.11.854）的过程。

Why: Computers use IP addresses to identify and communicate with each other on the internet. The DNS resolution ensures that the browser can locate the correct server hosting the website.
为什么: 计算机使用 IP 地址来识别和相互通信。DNS 解析确保浏览器能够找到托管网站的正确服务器。

How:

• Cache Lookup: The browser first checks its cache to see if it already knows the IP address for the domain. If the cache fails, the browser queries the operating system.
  如何:

  • 缓存查找: 浏览器首先检查其缓存，看是否已经知道该域的 IP 地址。如果缓存失败，浏览器会查询操作系统。

• Recursive DNS Query: If the operating system does not have the IP address, the query is sent to the recursive DNS resolver, which then queries the root domain name server, top-level domain (TLD) name server, and so forth until the IP address is found.
  递归 DNS 查询: 如果操作系统没有 IP 地址，查询将发送到递归 DNS 解析器，然后解析器查询根域名服务器、顶级域 (TLD) 名服务器等，直到找到 IP 地址。

Example (例子):

• When you type "www.mypage.com," the DNS resolver translates this into "80.162.11.854," which the browser uses to locate the server.
  当你输入“www.mypage.com”时，DNS 解析器将其转换为“80.162.11.854”，浏览器使用该地址来定位服务器。

Step 2: TCP/IP Connection

步骤 2: TCP/IP 连接

What: TCP/IP (Transmission Control Protocol/Internet Protocol) establishes a reliable connection between your browser (the client) and the web server.
什么: TCP/IP（传输控制协议/互联网协议）在你的浏览器（客户端）和 Web 服务器之间建立可靠的连接。

Why: This connection is essential for ensuring that the data transmitted between the client and server is complete and arrives in the correct order.
为什么: 这个连接对于确保在客户端和服务器之间传输的数据是完整的并且按正确的顺序到达至关重要。

How:

• Three-Way Handshake: The connection is established using a three-step process known as the TCP three-way handshake:
  • SYN: The client sends a SYN (synchronize) packet to the server to request a connection.
  • SYN-ACK: The server responds with a SYN-ACK (synchronize-acknowledge) packet to acknowledge the connection request.
  • ACK: The client sends an ACK (acknowledge) packet back to the server, and the connection is established.
    如何:
  • 三次握手: 连接通过称为 TCP 三次握手的三步过程建立:
  • SYN: 客户端向服务器发送 SYN（同步）数据包以请求连接。
  • SYN-ACK: 服务器响应一个 SYN-ACK（同步确认）数据包以确认连接请求。
  • ACK: 客户端向服务器发送一个 ACK（确认）数据包，连接建立。

Example (例子):

• When you type "www.mypage.com," your browser initiates a TCP connection with the server hosting the website using the IP address found through DNS resolution.
  当你输入“www.mypage.com”时，浏览器使用通过 DNS 解析找到的 IP 地址与托管网站的服务器建立 TCP 连接。

Step 3: HTTP Request and Response

步骤 3: HTTP 请求和响应

What: HTTP (Hypertext Transfer Protocol) is the protocol used for transmitting web pages and other resources over the internet.
什么: HTTP（超文本传输协议）是用于通过互联网传输网页和其他资源的协议。

Why: HTTP defines how messages are formatted and transmitted, and how web servers and browsers should respond to various commands.
为什么: HTTP 定义了消息的格式和传输方式，以及 Web 服务器和浏览器如何响应各种命令。

How:

• HTTP Request: The browser sends an HTTP GET request to the server, asking for the specific page (e.g., "GET /index.html").
  如何:

  • HTTP 请求: 浏览器向服务器发送 HTTP GET 请求，要求获取特定页面（例如，“GET /index.html”）。

• HTTP Response: The server processes the request and sends back the requested resource (e.g., HTML, CSS, JavaScript files) along with an HTTP status code indicating the result (e.g., 200 OK, 404 Not Found).

  • HTTP 响应: 服务器处理请求并发送回请求的资源（例如，HTML、CSS、JavaScript 文件），以及表示结果的 HTTP 状态代码（例如，200 OK，404 Not Found）。

Example (例子):

• If the server responds with a "200 OK" status, it means the page was found and is being sent to the browser.
  如果服务器响应“200 OK”状态，则表示找到了页面并正在发送给浏览器。

Step 4: Rendering the Web Page

步骤 4: 渲染网页

What: Once the browser receives the HTML, CSS, and JavaScript files from the server, it begins rendering the web page for display.
什么: 一旦浏览器从服务器接收到 HTML、CSS 和 JavaScript 文件，它就会开始渲染网页以供显示。

Why: Rendering is the process by which the browser transforms the code into the visual web page that the user sees.
为什么: 渲染是浏览器将代码转换为用户看到的视觉网页的过程。

How:

• DOM Tree Construction: The browser parses the HTML document to create a Document Object Model (DOM) tree representing the structure of the page.
  如何:

  • DOM 树构建: 浏览器解析 HTML 文档以创建表示页面结构的文档对象模型 (DOM) 树。

• CSSOM Tree Construction: The browser parses the CSS files to create a CSS Object Model (CSSOM) tree, which represents the styles applied to the page.

  • CSSOM 树构建: 浏览器解析 CSS 文件以创建 CSS 对象模型 (CSSOM) 树，表示应用于页面的样式。

• Render Tree: The DOM and CSSOM trees are combined to create the Render Tree, which represents the visual elements of the page.

  • 渲染树: DOM 和 CSSOM 树组合起来创建渲染树，表示页面的视觉元素。

• Layout: The browser calculates the size and position of each element on the page based on the Render Tree.

  • 布局: 浏览器根据渲染树计算页面上每个元素的大小和位置。

• Painting: The browser paints the pixels to the screen, rendering the visual elements of the web page.

  • 绘制: 浏览器将像素绘制到屏幕上，渲染网页的视觉元素。

Example (例子):

• When you type "www.mypage.com," after the HTTP request and response cycle, the browser constructs the DOM and CSSOM trees and renders the page for you to view.
  当你输入“www.mypage.com”时，在 HTTP 请求和响应周期后，浏览器构建 DOM 和 CSSOM 树并渲染页面供你查看。

HTTP Status Codes

HTTP 状态代码

1xx – Informational Messages (信息消息): These codes indicate that the request was received and is continuing to be processed.
1xx – 信息消息: 这些代码表示请求已收到并正在继续处理。

2xx – Success (成功): These codes indicate that the request was successfully received, understood, and accepted.
2xx – 成功: 这些代码表示请求已成功收到、理解并接受。

3xx – Redirection (重定向): These codes indicate that further action is needed to complete

the request, usually by redirecting the client to another URL.
3xx – 重定向: 这些代码表示需要进一步操作以完成请求，通常通过将客户端重定向到另一个 URL。

4xx – Client Errors (客户端错误): These codes indicate that the request contains incorrect syntax or cannot be fulfilled.
4xx – 客户端错误: 这些代码表示请求包含不正确的语法或无法完成。

5xx – Server Errors (服务器错误): These codes indicate that the server failed to fulfill a valid request.
5xx – 服务器错误: 这些代码表示服务器未能完成有效请求。

Conclusion

结论

When you type a URL into your browser’s address bar, a series of sophisticated processes occur to retrieve and render the web page. Understanding these steps—from DNS resolution to rendering—provides valuable insights into how the web functions and helps developers optimize their applications for better performance and user experience.
当你在浏览器的地址栏中输入一个 URL 时，会发生一系列复杂的过程来获取和渲染网页。理解这些步骤——从 DNS 解析到渲染——提供了有关 Web 如何工作的宝贵见解，并帮助开发人员优化其应用程序，以提高性能和用户体验。

This knowledge is essential for anyone involved in web development, network administration, or simply curious about how the internet works.
这些知识对于参与网页开发、网络管理或对互联网工作原理感到好奇的任何人来说都是必不可少的。