浏览器是如何找到网站的

4c7b91ba2ea4a5541a3c01d2222396ea.png

万维网是如何运作的:幕后揭秘

让我们来了解一下,当我们输入一个网站地址并按下回车键时,会发生什么。我们看到屏幕上显示了网站的组件,但这一切是如何实现的呢?

5acee5b0a49f4a58a9ac8c6f43fecd81.gif

1. 寻找网站

要访问一个网站,我们通常会在浏览器中输入其名称。然而,我们的计算机并不像我们一样理解网站的名称。

相反,它使用 IP 地址——一串数字,作为互联网中每个设备的唯一标识符。因此,当我们搜索一个网站时,我们的计算机需要找到其 IP 地址。

2. 您的 ISP:互联网网关

当您在浏览器中输入“google.com”时,您的设备不会直接连接到该网站。相反,它会向您的互联网服务提供商(ISP)发送一个请求,询问该网站的 IP 地址。

eacd1a33f8d9415ba45156c8ba04a9a1.png

ISP 是一家为您提供互联网接入的公司,不同国家的 ISP 可能会有所不同。

3. DNS:互联网的电话簿

ISP 也不知道“google.com”在哪里。为了找到它,它会联系域名系统(DNS),DNS 就像是互联网的一个巨大电话簿。

b1f31816f7f24ed58f8c6dd38d8dabad.png

DNS 存储了所有网站的 IP 地址及其域名。所以当 ISP 收到 google.com 的请求时,它会联系 DNS,查询与该域名关联的 IP 地址。

然后,DNS 响应一个 IP 地址,ISP 将其发送回您的浏览器。

6b7caaacf60a433fbcdfeef7eddd2b40.png

4. 连接到网站

一旦我们有了 IP 地址,您的浏览器会准备一个 HTTP 请求。这个请求通过一系列的电缆和路由器到达其目的地。

cc423001e1ed4ff6942c4b2be30ef8bf.png

接收请求的服务器就像一个仓库,存储了构成网站的所有文件。它会搜索构建‘google.com’的 HTML、CSS 和 JavaScript 文件,并将它们发送回您的浏览器。

1c2a189c295541d9a241407f7fc133f2.png

5. 渲染魔法

现在,您的浏览器已经拿到了这些文件,它开始解释它们。它读取 HTML,理解结构,应用 CSS 样式,执行 JavaScript……网页就出现在您的屏幕上了。

a713899ea7ed41a8a184b4e50a0eff6e.png

在此之后,您的浏览器和谷歌服务器之间可能会有许多其他的请求来回传递其他 HTML、CSS 和 JS 文件。然而,您不需要为这些请求再次联系 ISP,因为它们会直接发送到谷歌的服务器。此外,您的浏览器可能已经缓存了 google.com 的 IP 地址,因此下次不需要再向 ISP 发出不必要的请求。

实验:亲身体验

想要证据吗?试试这个:

  1. 打开浏览器的开发者工具(按 F12 或右键单击并选择“检查”)。
  2. 转到“网络”标签。
  3. 输入“google.com”并按下回车。
  4. 找到第一个请求并查看“远程地址”——那是谷歌的 IP 地址!
  5. 将 IP 地址复制粘贴到一个新标签页中并按下回车。

1848500f7d814bf7a5800b53d0160ff5.png

您会在没有 ISP 和 DNS 参与的情况下访问到谷歌。

总结:大局观

所以,当您访问一个网站时:

  1. 域名翻译:您的 ISP 使用 DNS 查找网站的 IP 地址。
  2. HTTP 请求:您的浏览器向服务器请求网站。
  3. 服务器响应:服务器发送 HTML、CSS 和 JavaScript 文件。
  4. 渲染:您的浏览器组装并显示网站。

职场攻略与副业指南,成就你的IT人生。快扫描下面二维码关注吧!

ba1e8177db424136a3b666cf83ea7eef.png

  • 7
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值