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

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

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

您是否想知道当您在浏览器中输入 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]删除
最新教程 更多>
  • 为什么我的CSS背景图像出现?
    为什么我的CSS背景图像出现?
    故障排除:CSS背景图像未出现 ,您的背景图像尽管遵循教程说明,但您的背景图像仍未加载。图像和样式表位于相同的目录中,但背景仍然是空白的白色帆布。而不是不弃用的,您已经使用了CSS样式: bockent {背景:封闭图像文件名:背景图:url(nickcage.jpg); 如果您的html,css...
    编程 发布于2025-05-24
  • 如何避免Go语言切片时的内存泄漏?
    如何避免Go语言切片时的内存泄漏?
    ,a [j:] ...虽然通常有效,但如果使用指针,可能会导致内存泄漏。这是因为原始的备份阵列保持完整,这意味着新切片外部指针引用的任何对象仍然可能占据内存。 copy(a [i:] 对于k,n:= len(a)-j i,len(a); k
    编程 发布于2025-05-24
  • Spark DataFrame添加常量列的妙招
    Spark DataFrame添加常量列的妙招
    在Spark Dataframe ,将常数列添加到Spark DataFrame,该列具有适用于所有行的任意值的Spark DataFrame,可以通过多种方式实现。使用文字值(SPARK 1.3)在尝试提供直接值时,用于此问题时,旨在为此目的的column方法可能会导致错误。 df.withCo...
    编程 发布于2025-05-24
  • `console.log`显示修改后对象值异常的原因
    `console.log`显示修改后对象值异常的原因
    foo = [{id:1},{id:2},{id:3},{id:4},{id:id:5},],]; console.log('foo1',foo,foo.length); foo.splice(2,1); console.log('foo2', foo, foo....
    编程 发布于2025-05-24
  • 同实例无需转储复制MySQL数据库方法
    同实例无需转储复制MySQL数据库方法
    在同一实例上复制一个MySQL数据库而无需转储在同一mySQL实例上复制数据库,而无需创建InterMediate sqql script。以下方法为传统的转储和IMPORT过程提供了更简单的替代方法。 直接管道数据 MySQL手动概述了一种允许将mysqldump直接输出到MySQL clie...
    编程 发布于2025-05-24
  • 解决MySQL插入Emoji时出现的\\"字符串值错误\\"异常
    解决MySQL插入Emoji时出现的\\"字符串值错误\\"异常
    Resolving Incorrect String Value Exception When Inserting EmojiWhen attempting to insert a string containing emoji characters into a MySQL database us...
    编程 发布于2025-05-24
  • 在GO中构造SQL查询时,如何安全地加入文本和值?
    在GO中构造SQL查询时,如何安全地加入文本和值?
    在go中构造文本sql查询时,在go sql queries 中,在使用conting and contement和contement consem per时,尤其是在使用integer per当per当per时,per per per当per. [&​​&&&&&&&&&&&&&&&默元组方法在...
    编程 发布于2025-05-24
  • 为什么使用固定定位时,为什么具有100%网格板柱的网格超越身体?
    为什么使用固定定位时,为什么具有100%网格板柱的网格超越身体?
    网格超过身体,用100%grid-template-columns 为什么在grid-template-colms中具有100%的显示器,当位置设置为设置的位置时,grid-template-colly修复了?问题: 考虑以下CSS和html: class =“ snippet-code”> g...
    编程 发布于2025-05-24
  • C++成员函数指针正确传递方法
    C++成员函数指针正确传递方法
    如何将成员函数置于c [&& && && && && && && && && && &&&&&&&&&&&&&&&&&&&&&&&华仪的函数时,在接受成员函数指针的函数时,要在函数上既要提供指针又可以提供指针和指针到函数的函数。需要具有一定签名的功能指针。要通过成员函数,您需要同时提供对象指针(此...
    编程 发布于2025-05-24
  • 如何使用Regex在PHP中有效地提取括号内的文本
    如何使用Regex在PHP中有效地提取括号内的文本
    php:在括号内提取文本在处理括号内的文本时,找到最有效的解决方案是必不可少的。一种方法是利用PHP的字符串操作函数,如下所示: 作为替代 $ text ='忽略除此之外的一切(text)'; preg_match('#((。 &&& [Regex使用模式来搜索特...
    编程 发布于2025-05-24
  • Java中Lambda表达式为何需要“final”或“有效final”变量?
    Java中Lambda表达式为何需要“final”或“有效final”变量?
    Lambda Expressions Require "Final" or "Effectively Final" VariablesThe error message "Variable used in lambda expression shou...
    编程 发布于2025-05-24
  • 使用jQuery如何有效修改":after"伪元素的CSS属性?
    使用jQuery如何有效修改":after"伪元素的CSS属性?
    在jquery中了解伪元素的限制:访问“ selector 尝试修改“:”选择器的CSS属性时,您可能会遇到困难。 This is because pseudo-elements are not part of the DOM (Document Object Model) and are th...
    编程 发布于2025-05-24
  • CSS强类型语言解析
    CSS强类型语言解析
    您可以通过其强度或弱输入的方式对编程语言进行分类的方式之一。在这里,“键入”意味着是否在编译时已知变量。一个例子是一个场景,将整数(1)添加到包含整数(“ 1”)的字符串: result = 1 "1";包含整数的字符串可能是由带有许多运动部件的复杂逻辑套件无意间生成的。它也可以是故意从单个真理...
    编程 发布于2025-05-24
  • 如何在JavaScript对象中动态设置键?
    如何在JavaScript对象中动态设置键?
    在尝试为JavaScript对象创建动态键时,如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正确的方法采用方括号: jsobj ['key''i] ='example'1; 在JavaScript中,数组是一...
    编程 发布于2025-05-24

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

Copyright© 2022 湘ICP备2022001581号-3