”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 当您在浏览器中输入 URL 时会发生什么?

当您在浏览器中输入 URL 时会发生什么?

发布于2024-11-05
浏览:447

您是否想知道当您在浏览器中输入 URL 并按 Enter 键时幕后会发生什么?该过程比您想象的更加复杂,涉及多个步骤,这些步骤无缝地协同工作以提供您请求的网页。在本文中,我们将探讨从输入 URL 到查看完全加载的网页的整个过程,阐明使这一切成为可能的技术和协议。

What Happens When You Type a URL Into a Browser?

第 1 步:输入 URL 并将其转换为 IP 地址

当您在浏览器中输入 URL(例如 www.example.com)时,旅程就开始了。浏览器的首要任务是将这个人类可读的 URL 转换为 IP 地址,即托管网站的服务器的数字地址。这种翻译至关重要,因为当我们使用域名时,计算机使用数字地址进行通信,例如 192.0.2.1.

为了查找 IP 地址,浏览器会检查多个缓存以加快该过程:

  • 浏览器缓存:存储以前的IP地址以避免重复查找。
  • 操作系统 (OS) 缓存:如果在浏览器缓存中找不到,则会检查操作系统缓存。
  • 路由器或本地缓存:浏览器可能会检查路由器的缓存或本地网络缓存。
  • ISP 缓存:最后,您的 Internet 服务提供商 (ISP) 保留 IP 地址缓存。

如果这些缓存均不包含 IP 地址,浏览器将执行 DNS(域名系统)查找。

步骤 2:DNS 查找并解析 IP 地址

当在任何缓存中都找不到 IP 地址时,浏览器将启动 DNS 查找。将 DNS 视为互联网的电话簿 — 它通过几个步骤将域名转换为 IP 地址:

  1. 递归 DNS 查找:DNS 解析器对各个 DNS 服务器进行递归查询,直到找到请求的 IP 地址。
  2. 根 DNS 服务器:解析器首先查询根 DNS 服务器,根 DNS 服务器将其定向到 TLD(顶级域)DNS 服务器(例如 .com 或 .org)。
  3. 权威 DNS 服务器:TLD 服务器随后指向该域的权威 DNS 服务器(例如 example.com),该服务器提供正确的 IP 地址。

有了这些信息,您的浏览器就可以继续与网络服务器建立连接。

第3步:建立TCP连接和HTTPS握手

一旦您的浏览器获得了 IP 地址,它就会发送 HTTP(或 HTTPS)请求以发起与 Web 服务器的通信。然而,在交换任何数据之前,必须通过称为 TCP 3 次握手:

的过程建立 TCP(传输控制协议)连接
  1. SYN:客户端发送SYN(同步)消息来请求连接。
  2. SYN-ACK:服务器用 SYN-ACK(同步确认)消息进行响应。
  3. ACK:最后,客户端发回ACK(确认)消息以建立连接。

如果您通过 HTTPS 访问网站,则会发生一个附加步骤 - SSL/TLS 握手 - 确保浏览器和服务器之间交换的数据经过加密:

  1. 服务器将其公钥发送到您的浏览器。
  2. 您的浏览器使用此公钥加密会话密钥并将其发回。
  3. 服务器使用其私钥解密此会话密钥。
  4. 双方使用此会话密钥进行安全通信。

第4步:发送HTTP请求

建立安全连接后,您的浏览器会发送 HTTP 请求以访问服务器上的特定资源。此请求包含详细信息,例如您的浏览器类型以及您尝试访问的页面。 HTTP 请求可能如下所示:


GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Accept: text/html


服务器处理该请求并准备发回所请求的资源。

第五步:服务器处理请求并发送响应

处理您的请求后,服务器会生成一个 HTTP 响应,其中包含渲染页面所需的 HTML、CSS、JavaScript 和图像等资源。理想情况下,此响应的状态代码为 200 OK,表示一切顺利。

以下是该响应的示例:


HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 3485




Example Page


Welcome to Example.com!






第 6 步:渲染页面

一旦您的浏览器收到此响应,它就会开始通过解析 HTML 和 CSS 文件来渲染页面,同时执行这些文件中包含的任何 JavaScript 代码。此过程涉及创建文档对象模型 (DOM),它表示网页上的元素的结构。

渲染引擎负责根据此 DOM 结构和应用于其的 CSS 样式在屏幕上绘制像素。

结论

了解当您在浏览器中输入 URL 时会发生什么,揭示了现代网络技术是多么复杂而高效。从将域名转换为 IP 地址,到建立安全连接和无缝呈现页面,每一步对于快速安全地交付内容都起着至关重要的作用。

下次您在线浏览时,请花点时间欣赏所有这些幕后流程的协同工作,以便您可以在您喜爱的网站上享受流畅的导航!

延伸阅读

对于那些有兴趣加深网络技术如何工作或寻求更多技术见解的人:

  • DNS 的工作原理
  • 理解 TCP/IP
  • HTTPS 连接

通过探索这些资源,您将更深入地了解我们的数字世界如何运作!

版本声明 本文转载于:https://dev.to/vyan/what-happens-when-you-type-a-url-into-a-browser-2mh2?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • jQuery中如何高效获取隐藏元素的高度?
    jQuery中如何高效获取隐藏元素的高度?
    在 jQuery 中获取隐藏元素的高度处理隐藏元素时,检索其高度可能具有挑战性。暂时显示元素以测量其高度然后再次隐藏它的传统方法似乎效率低下。有没有更优化的解决方案?jQuery 1.4.2 方法这是一个使用 jQuery 1.4.2 的示例:$select.show(); optionHeight...
    编程 发布于2024-11-05
  • 为什么我不能在 Go Struct 标签中使用变量?
    为什么我不能在 Go Struct 标签中使用变量?
    在 Go 结构体标签中使用变量在 Go 中,结构体标签用于指定有关结构体中字段的元数据。虽然可以使用字符串文字定义标签,但尝试在其位置使用变量会导致错误。无效用法:const ( TYPE = "type" ) type Shape struct { Type s...
    编程 发布于2024-11-05
  • Qopy:作为开发人员我最喜欢的剪贴板管理器
    Qopy:作为开发人员我最喜欢的剪贴板管理器
    作为一名开发人员,我一直在寻找可以使我的工作流程更顺畅、更高效的工具。最近,我偶然发现了 Qopy,一个可以在 Linux 和 Windows 上运行的开源剪贴板管理器。 什么是Qopy? Qopy 是一个简单的剪贴板管理器,旨在改进标准剪贴板体验。它的设计宗旨是用户友好、可靠且快速...
    编程 发布于2024-11-05
  • 为什么我的按钮上的悬停效果不起作用?
    为什么我的按钮上的悬停效果不起作用?
    更改悬停时的按钮颜色:替代解决方案尝试更改悬停时按钮的颜色时,如果出现以下情况,可能会令人沮丧该解决方案未能产生预期的效果。考虑提供的示例代码:a.button { ... } a.button a:hover{ background: #383; }此解决方案尝试在链接悬停在“按钮...
    编程 发布于2024-11-05
  • 仅使用 Python 构建前端
    仅使用 Python 构建前端
    对于专注于后端的开发人员来说,前端开发可能是一项艰巨的、甚至是噩梦般的任务。在我职业生涯的早期,前端和后端之间的界限是模糊的,每个人都被期望能够处理这两者。 CSS,尤其是,是一场持续不断的斗争;这感觉像是一个不可能完成的任务。 虽然我喜欢前端工作,但 CSS 对我来说仍然是一个复杂的挑战,特别是因...
    编程 发布于2024-11-05
  • 如何在 Laravel 中运行 Cron 作业
    如何在 Laravel 中运行 Cron 作业
    在本教程中,我将向您展示如何在 Laravel 中运行 cron 作业,但最重要的是,我们会让事情对我们的学生来说简单易行。在构建 Laravel 应用程序时,我们将探索如何在您自己的计算机上设置和运行这些自动化任务。 首先,什么是 cron 作业?将其视为您网站的私人助理 - 一个从不睡觉并且总...
    编程 发布于2024-11-05
  • 填充如何影响内联元素的间距以及如何解决冲突?
    填充如何影响内联元素的间距以及如何解决冲突?
    内联元素上的填充:效果和限制根据源码,在内联元素的顶部和底部添加内边距并不影响周围元素的间距。然而,“填充将与其他内联元素重叠”这一说法表明,在某些特定情况下,填充确实会产生影响。了解重叠填充填充主要影响它应用于的元素,增加其垂直边框。在正常情况下,这不会导致与相邻的内联元素重叠,因为它们可以在填充...
    编程 发布于2024-11-05
  • Django 基于类的视图变得简单
    Django 基于类的视图变得简单
    众所周知,django在开发Web应用程序时使用MVT(模型-视图-模板)进行设计。 View 本身是一个可调用的,它接受请求并返回响应。它不仅仅是一个函数,因为 Django 提供了一种称为“基于类的视图”的东西,因此开发人员可以使用基于类的方法或者您可以说 OOP 方法来编写视图。这个基于类的...
    编程 发布于2024-11-05
  • 使用 VAKX 构建您的无代码 AI 代理
    使用 VAKX 构建您的无代码 AI 代理
    If you’ve been keeping up with the AI space, you already know that AI agents are becoming a game-changer in the world of automation and customer inter...
    编程 发布于2024-11-05
  • 这里是我如何在 jQuery Datatable 中实现基于游标的分页。
    这里是我如何在 jQuery Datatable 中实现基于游标的分页。
    在 Web 应用程序中处理大型数据集时,分页对于性能和用户体验至关重要。标准的基于偏移量的分页(通常与数据表一起使用)对于大型数据集可能效率低下。 基于游标的分页提供了一种性能更高的替代方案,特别是在处理实时更新或大量数据加载时。在本文中,我将引导您了解如何在 jQuery DataTable 中...
    编程 发布于2024-11-05
  • 为什么同步引擎可能是 Web 应用程序的未来
    为什么同步引擎可能是 Web 应用程序的未来
    在不断发展的 Web 应用程序世界中,效率、可扩展性和无缝实时体验至关重要。传统的 Web 架构严重依赖于客户端-服务器模型,这些模型可能难以满足现代对响应能力和同步的需求。这就是同步引擎发挥作用的地方,它为开发人员当今面临的许多挑战提供了一个有前途的解决方案。但同步引擎到底是什么?为什么它们可能是...
    编程 发布于2024-11-05
  • Python 计算机视觉简介(第 1 部分)
    Python 计算机视觉简介(第 1 部分)
    注意:在这篇文章中,我们将仅使用灰度图像以使其易于理解。 什么是图像? 图像可以被认为是值的矩阵,其中每个值代表像素的强度。图像格式主要分为三种类型: Binary:此格式的图像由值为 0(黑色)和 1(白色)的单个二维矩阵表示。这是最简单的图像表示形式。 Grey-Scale:在此...
    编程 发布于2024-11-05
  • 网站 HTML 代码
    网站 HTML 代码
    我一直在尝试建立一个与航空公司相关的网站。我只是想确认我是否可以使用人工智能生成代码来生成整个网站。 HTML 网站是否兼容博客,或者我应该使用 JavaScript?这是我用作演示的代码。 <!DOCTYPE html> <html lang="en">[](url) &l...
    编程 发布于2024-11-05
  • 像程序员一样思考:学习 Java 基础知识
    像程序员一样思考:学习 Java 基础知识
    本文介绍了 Java 编程的基本概念和结构。它首先介绍了变量和数据类型,然后讨论了操作符和表达式,以及控制流流程。其次,它解释了方法和类,然后介绍了输入和输出操作。最后,本文通过一个工资计算器的实际示例展示了这些概念的应用。像程序员一样思考:掌握 Java 基础1. 变量和数据类型Java 使用变量...
    编程 发布于2024-11-05
  • PHP GD 可以比较两个图像的相似性吗?
    PHP GD 可以比较两个图像的相似性吗?
    PHP GD 可以确定两个图像的相似度吗?正在考虑的问题询问是否可以使用以下命令确定两个图像是否相同PHP GD 通过比较它们的差异。这需要获取两个图像之间的差异并确定它是否完全由白色(或任何统一的颜色)组成。根据提供的答案,散列函数(如其他响应所建议的那样)不适用于此语境。比较必须涉及图像内容而不...
    编程 发布于2024-11-05

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3