从 URL 输入到页面展现的幕后故事

前端

2024-02-13 19:07:00

从 URL 输入到页面展现的幕后故事

从你在浏览器的地址栏中输入一个 URL 到你看到页面上的内容，这背后发生了一系列复杂的过程，涉及到了多种技术，包括：

URL（Uniform Resource Locator）： 统一资源定位符，用于指定互联网上资源的位置。例如，URL "https://www.baidu.com/" 指向百度网站的首页。
HTTP（Hypertext Transfer Protocol）： 超文本传输协议，用于在客户端（如浏览器）和服务器之间传输数据。
DNS（Domain Name System）： 域名系统，用于将域名（如 "www.baidu.com"）转换为对应的IP地址（如 "119.75.218.101"）。
TCP（Transmission Control Protocol）： 传输控制协议，用于在客户端和服务器之间建立可靠的连接。
HTML（Hypertext Markup Language）： 超文本标记语言，用于定义网页的结构和内容。
CSS（Cascading Style Sheets）： 层叠样式表，用于定义网页的外观和布局。
JavaScript： 一种编程语言，用于在网页上添加交互性和动态性。
浏览器： 一种软件，用于请求和显示网页。
服务器： 一种计算机，用于存储和提供网页。

过程概览

当你在浏览器的地址栏中输入一个 URL 并按回车键后，浏览器会执行以下步骤：

检查你输入的 URL 是否有效。如果 URL 无效，浏览器会显示错误消息。
如果 URL 有效，浏览器会向 DNS 服务器查询该 URL 对应的 IP 地址。
浏览器使用 IP 地址向服务器发送 HTTP 请求，请求服务器提供该 URL 对应的网页内容。
服务器收到 HTTP 请求后，会将网页内容发送给浏览器。
浏览器收到网页内容后，会对其进行解析，并将其显示在浏览器窗口中。

技术细节

上述过程中涉及到的技术细节非常复杂，这里我只简单介绍一下：

URL： URL 由协议、主机名、端口号和路径等部分组成。协议指定了用于传输数据的协议，如 HTTP 或 HTTPS。主机名指定了服务器的名称或 IP 地址。端口号指定了服务器上用于接收请求的端口。路径指定了要请求的资源的路径。
HTTP： HTTP 是一个无状态的协议，这意味着每次请求都是独立的，服务器不会保存任何有关客户端状态的信息。HTTP 有多种请求方法，如 GET、POST、PUT 和 DELETE。GET 方法用于获取资源，POST 方法用于创建资源，PUT 方法用于更新资源，DELETE 方法用于删除资源。
DNS： DNS 是一个分布式数据库，用于将域名转换为 IP 地址。当浏览器向 DNS 服务器查询一个域名的 IP 地址时，DNS 服务器会返回该域名的 IP 地址，或者返回一个错误消息。
TCP： TCP 是一个面向连接的协议，这意味着在客户端和服务器之间建立连接后，所有的数据都会通过该连接传输。TCP 提供可靠的数据传输服务，这意味着数据不会丢失或损坏。
HTML： HTML 是一种标记语言，用于定义网页的结构和内容。HTML 文档由一系列标签组成，每个标签都有一个特定的含义。例如，标签定义了网页的根元素，标签定义了网页的头部，标签定义了网页的主体。
CSS： CSS 是一种样式表语言，用于定义网页的外观和布局。CSS 文档由一系列规则组成，每个规则都由一个选择器和一个声明块组成。选择器指定了要应用规则的元素，声明块指定了要应用于这些元素的样式。
JavaScript： JavaScript 是一种编程语言，用于在网页上添加交互性和动态性。JavaScript 代码可以嵌入 HTML 文档中，也可以通过外部脚本文件加载。JavaScript 代码可以操作 DOM（文档对象模型），DOM 是一个表示网页结构的树形数据结构。JavaScript 代码还可以与服务器进行通信，以获取或更新数据。
浏览器： 浏览器是一种软件，用于请求和显示网页。浏览器会解析 HTML、CSS 和 JavaScript 代码，并将解析结果显示在浏览器窗口中。浏览器还提供了各种功能，如历史记录、书签、选项卡等。
服务器： 服务器是一种计算机，用于存储和提供网页。服务器可以运行各种软件，如 Web 服务器、数据库服务器、邮件服务器等。Web 服务器负责处理 HTTP 请求，并将网页内容发送给浏览器。