地址栏中输入网址后发生了什么?

本文公众号来源:01二进制  作者:雇个城管打天下


记得在面试的时候也被问到这题,当时答得并不好,这道题目其实可以挖掘很多的知识点出来,建议阅读!

640?wx_fmt=jpeg

前几天有个学妹问我为什么在浏览器里面输了网址就会显示出来页面,虽然这个现象很常见,但是要想解释清楚确实有些小困难,当时也只是简单的回答了她,现在想趁着这个机会好好整理下相关知识。整理完才觉得其实就和我们去一个地方找人是一个道理。所以说艺术源于生活却又高于生活,技术同样如此。

在回答这个问题前, 我们先来了解下我们平常说的那个网址到底是啥?

网址的学名叫做统一资源定位符(Uniform Resource Locator, 常缩写为URL), 我们知道现在的互联网其实就是由众多资源所构成的一张巨大的网, 如何定位那些资源就是靠的URL, 因此我们也可以把URL理解为是网络上资源的“门牌号“, 我们在浏览器中输入网址, 就相当于开一辆车(浏览器)去找一个地址(URL)

1. 缓存查找

如果你要出门找一个地方, 第一想法肯定是先想这个地方你有没有去过, 你要是去过的话那就不需要问人直接过去就好了。 我们的系统也是这么想的。 当你在浏览器中输入了URL之后, 浏览器会先查看 浏览器缓存 中有没有这个地址, 如果没有那就再去 系统缓存, 如果系统缓存还没有, 那就去路由器缓存找, 总之只要缓存中有, 就说明有这个资源, 那浏览器直接显示出来就好了。

Tips: 这里说下 hosts文件hosts 是一个没有扩展名的系统文件, 可以用记事本等工具打开, 其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”, 当用户在浏览器中输入一个需要登录的网址时, 系统会首先自动从 hosts 文件中寻找对应的 IP 地址,一旦找到, 系统会立即打开对应网页, 如果没有找到, 则系统会再将网址提交 DNS 域名解析服务器进行IP地址的解析。 需要注意的是, hosts文件配置的映射是静态的, 如果网络上的计算机更改了请及时更新IP地址, 否则将不能访问。

2. DNS 解析

如果你认得去那个地址的路自然是最好, 那如果你根本就没去过那咋办? 肯定会有人说导航, 但并不是所有的地方都是导航能搜到的, 这个时候我们自然而然就会想着去问路人了。 浏览器也是这样的, 如果在本地缓存中没有找到想要的资源, 那就只能去其他网络上的机器中寻找我想要的资源了。 那你怎么知道你要的资源在那台机器上? 这时, DNS就横空出世了。

DNS(Domain Name System, 域名系统),DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时, 例如 www.baidu.com, 其实这段URL并不是真正意义上的地址。 互联网上每一台计算机的唯一标识是它的 IP 地址(比如127.0.0.1就是我们本机的 IP 地址), 但是 IP 地址并不方便记忆(毕竟都是很长的数字串), 所以也就出现了网址(URL)这个玩意了, 目的就是为了方便普通用户去寻找网络上的其他计算机。 所以 DNS 实际上充当了一个翻译的角色, 将网址翻译成 IP 地址(就跟我想去南京大学, 问路的那个人告诉我南京大学在广州路上是一个道理)。

2.1 DNS 解析过程

DNS解析其实是一个递归查询的过程:640?wx_fmt=jpeg

在上述过程中, 首先在本地域名服务器中查询 IP 地址, 如果没有找到, 本地域名服务器会向根域名服务器发送一个请求, 如果根域名服务器也不存在该域名时, 本地域名会向com顶级域名服务器发送一个请求, 依次类推下去。 直到最后找到目标网址所对应的 IP, 并将其缓存到本地, 以供下次使用。

2.2 DNS负载均衡

在讲DNS负载均衡前先来看张图片: 640?wx_fmt=jpeg

看到这可能就会有人犯嘀咕了, 我们不是 ping 的同一个网址吗, 为啥两次IP都不一样啊? 其实原因很简单, 如果每次都一样是否说明你请求的资源都位于同一台机器上面, 那么这台机器需要多高的性能和储存才能满足亿万请求呢? 其实真实的互联网世界背后存在成千上百台服务器, 大型的网站甚至更多。 但是在用户的眼中, 它需要的只是处理他的请求, 哪台机器处理请求并不重要。 DNS可以返回一个合适的机器的IP给用户, 例如可以根据每台机器的负载量, 该机器离用户地理位置的距离等等, 这种过程就是DNS负载均衡, 又叫做DNS重定向。

再来举个例子, 如果你在新街口用地图搜南京大学, 返回给你的第一条数据可能就是南京大学鼓楼校区(因为距离最近), 但如果你是在仙林用地图搜南京大学, 返回给你的第一条数据就有可能是南京大学仙林校区了。 DNS负载均衡简单来说也是这个道理。

2.3 DNS 污染

DNS 污染(DNS cache pollution), 又称域名服务器缓存投毒(DNS cache poisoning), 是指一些刻意制造或无意中制造出来的域名服务器数据包, 把域名指往不正确的IP地址

某些网络运营商为了某些目的, 对DNS进行了某些操作, 导致上网的用户无法通过域名取得正确的IP地址。 某些国家或地区出于某些目的为了防止某网站被访问, 而且其又掌握部分国际DNS根目录服务器或镜像, 也会利用此方法进行屏蔽。 (Google、 Facebook等)

至于如果防止DNS污染, 这里只说一个方法就是修改hosts文件, 其他的自行搜索吧。

3. TCP连接

其实在上面DNS解析的图中就已经有了TCP连接的过程了:640?wx_fmt=jpeg

我们通过DNS解析获取到了网址所对应的IP地址后, 便需要发起TCP连接请求, 这里总共需要三次握手, 具体的过程就不赘述了, 可以查阅相关资料, 这里推荐刘欣老师的《TCP/IP 之 大明王朝邮差》, 以及大学计算机网络课本里面的TCP相关章节。

4. HTTP 请求

握手成功后, 浏览器就可以向服务器发送http请求了, 请求数据包。 发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口(HTTP协议80/8080, HTTPS协议443)。HTTP请求报文是由三部分组成: 请求行,请求报头和请求正文。

4.1 请求行

格式如下:

Method  RequestURL  HTTPVersion CRLF

例如:

GET index.html HTTP/1.1

常用的方法有: GET,POST,PUT,DELETE,OPTIONS,HEAD

4.2 请求报头

请求报头允许客户端向服务器传递请求的附加信息和客户端自身的信息。

Tips:客户端不一定特指浏览器, 有时候也可使用Linux下的CURL命令以及HTTP客户端测试工具等。

常见的请求报头有: Accept,AcceptCharset,AcceptEncoding,AcceptLanguage,ContentType,Authorization,Cookie,UserAgent等。

640?wx_fmt=jpeg

上图是使用Chrome开发者工具截取的对百度的HTTP请求以及响应报文, 从图中可以看出, 请求报头中使用了Accept, AcceptEncoding, AcceptLanguage, CacheControl, Connection, Cookie等字段。 Accept 用于指定客户端用于接受哪些类型的信息, AcceptEncoding 与 Accept 类似, 它用于指定接受的编码方式。Connection 设置为 Keepalive 用于告诉客户端本次 HTTP 请求结束之后并不需要关闭 TCP 连接, 这样可以使下次 HTTP 请求使用相同的 TCP 通道, 节省 TCP 连接建立的时间。

5. 服务器响应

这部分对应的就是后端工程师眼中的 HTTP。 后端从在固定的端口接收到 TCP 报文开始, 这一部分对应于编程语言中的 socket。 它会对 TCP 连接进行处理, 对 HTTP 协议进行解析, 并按照报文格式进一步封装成 HTTP Request对象, 供上层使用。 这一部分工作一般是由 Web 服务器去进行, 常用的Web服务器有 Tomcat, IIS 和 Netty 等等。

HTTP响应报文也是由三部分组成: 状态码, 响应报头响应报文。 篇幅原因这里就不详细展开了。

6. 浏览器解析网页信息

服务器返回给浏览器的文本信息, 通常是 HTML, CSS, JS, 图片等文件, 那么浏览器是如何对泽泻内容进行渲染呢? 通常是下面五个步骤:

  1. 处理 HTML 标记并构建 DOM 树。

  2. 处理 CSS 标记并构建 CSSOM 树。

  3. 将 DOM 与 CSSOM 合并成一个渲染树。

  4. 根据渲染树来布局, 以计算每个节点的几何信息。

  5. 将各个节点绘制到屏幕上。

不过这五个步骤在不同内核的浏览器中执行细节是不同的, 想深入了解的可以查阅相关资料, 这里推荐一篇文章:《浏览器渲染页面过程与页面优化》(https://segmentfault.com/a/1190000010298038

浏览器是一个边解析边渲染的过程。 首先浏览器解析HTML文件构建DOM树, 然后解析CSS文件构建渲染树, 等到渲染树构建完成后, 浏览器开始布局渲染树并将其绘制到屏幕上。

JS的解析是由浏览器中的 JS 解析引擎完成的。 JS是单线程运行, 也就是说, 在同一个时间内只能做一件事, 所有的任务都需要排队, 前一个任务结束, 后一个任务才能开始。 但是又存在某些任务比较耗时, 如IO读写等, 所以需要一种机制可以先执行排在后面的任务, 这就是: 同步任务(synchronous)和异步任务(asynchronous)。 JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。 同步任务就是放在主线程上执行的任务, 异步任务是放在任务队列中的任务。 所有的同步任务在主线程上执行, 形成一个执行栈; 异步任务有了运行结果就会在任务队列中放置一个事件; 脚本运行时先依次运行执行栈, 然后会从任务队列里提取事件, 运行任务队列中的任务, 这个过程是不断重复的, 所以又叫做事件循环(Event loop)。 如下图所示:

640?wx_fmt=jpeg

7. 总结

当上述步骤执行完成后我们便可在浏览器中看到一个完整的页面了, 总结下其实就只有几步:

  1. 浏览器地址栏输入url

  2. 浏览器会先查看浏览器缓存系统缓存路由缓存, 如有存在缓存, 就直接显示。 如果没有, 接着第3步

  3. 域名解析(DNS)获取相应的 IP

  4. 浏览器向服务器发起 tcp 连接, 与浏览器建立 tcp 三次握手

  5. 握手成功, 浏览器向服务器发送 http 请求, 请求数据包

  6. 服务器请求数据, 将数据返回到浏览器

  7. 浏览器接收响应, 读取页面内容, 解析 html 源码, 生成 Dom 树

  8. 解析 css 样式、 浏览器渲染, js交互

其实简单来看这几个过程并不是很复杂, 但是每个步骤都可以深挖出一大堆的知识, 比如DNS的优化、页面渲染的优化、 HTTPS等等非常多的东西, 这里考虑到篇幅以及科普效果很多东西都一笔带过了。

最后

乐于输出干货的Java技术公众号:Java3y。公众号内有200多篇原创技术文章、海量视频资源、精美脑图,不妨来关注一下!

640?wx_fmt=jpeg

有帮助?在看!转发! 640
### 回答1: 好的,我了解了。关于您的问题,整个过程可以分为以下几个步骤: 1. 输入URL:当您在浏览器地址栏输入URL时,浏览器将该URL发送到域名系统(DNS),通过域名系统将URL转化为IP地址。 2. 发送HTTP请求:浏览器根据URL发起HTTP请求,请求访问Web服务器的特定资源。 3. 服务器响应:当Web服务器接收到请求时,它将处理请求并返回所请求的资源。 4. 浏览器渲染:浏览器收到服务器响应后,它将解析HTML源代码,并根据CSS样式表和JavaScript代码来渲染页面。 5. 页面展示:最终,浏览器将HTML、CSS和JavaScript代码解析完毕后,它在屏幕上展示出页面内容。 以上就是从输入URL到页面展示的整个过程,希望能够帮到您。 ### 回答2: 当我们在浏览器的地址栏输入URL时,整个过程可以分为以下几个步骤: 1. DNS解析:浏览器首先根据URL的域名(例如www.example.com)进行DNS解析,将域名解析为对应的IP地址。这一步骤是为了找到存放网页的服务器。 2. 建立TCP连接:浏览器通过IP地址与服务器建立TCP连接。TCP协议提供可靠的连接,确保数据的完整性。 3. 发起HTTP请求:一旦建立了TCP连接,浏览器向服务器发起HTTP请求,请求包括请求方法、请求头、请求体等信息。请求方法可以是GET、POST等,服务器根据请求的不同做出相应的响应。 4. 服务器处理请求并响应:服务器接收到浏览器的请求后,根据请求的内容进行相应的处理。处理包括读取数据库、执行后端代码等操作。之后,服务器生成响应对象,包含响应状态码、响应头、响应体等信息。 5. 接收服务器响应:浏览器接收到服务器的响应后,根据响应头的Content-Type确定响应的数据类型。如为HTML类型,则浏览器将响应的HTML代码解析成DOM树。 6. 解析页面并渲染:浏览器根据DOM树构建渲染树,并依据CSS样式对各元素进行布局和样式计算,最终生成页面的渲染结果。同时,浏览器也执行页面的JavaScript代码。 7. 页面展示:最后,浏览器将渲染好的页面内容显示在用户的视窗,用户可以看到页面的展示效果。 总结起来,从输入URL到页面展示,经历了DNS解析、建立TCP连接、发起HTTP请求、服务器处理请求并响应、接收服务器响应、解析页面并渲染等多个步骤。最终,浏览器将渲染好的页面内容显示给用户。 ### 回答3: 从输入URL到页面展示,大致经历如下步骤: 1. 域名解析:当我们在浏览器输入URL后,首先进行域名解析。浏览器向DNS服务器发送域名请求,获取该域名对应的IP地址。 2. 建立连接:浏览器通过获取到的IP地址与Web服务器建立TCP连接。这个过程使用的是三次握手协议,确保连接的可靠性。 3. 发送请求:建立连接后,浏览器发送HTTP请求给Web服务器,请求的内容包括请求的类型(GET/POST等)、地址、头部信息、可能还包括cookie等相关信息。 4. 服务器处理请求:Web服务器收到请求后,根据请求内容进行处理。处理过程可能包括调取数据库、运行后台程序等动作。 5. 服务器响应:Web服务器根据请求的内容,返回一个HTTP响应给浏览器。响应的内容包括状态码、响应头部、实际的网页内容等。 6. 下载页面资源:浏览器接收到服务器返回的响应后,开始下载网页的资源,如HTML、CSS、JavaScript、图片等。浏览器根据响应头部的Content-Type确定如何解析资源。 7. 页面渲染:当所有的资源下载完成后,浏览器根据HTML结构、CSS样式,解析并渲染出网页。浏览器从上到下解析HTML文档,解析过程包括构建DOM树、计算CSS样式、布局页面等。 8. JavaScript执行:在渲染过程,浏览器遇到JavaScript代码。浏览器逐行解析执行JavaScript代码,并根据代码修改DOM树和样式,可能还触发网络请求等。 9. 页面展示:当页面渲染和JavaScript执行完成后,页面便可以完整地展示给用户了。用户可以看到页面内容,与页面进行交互。 以上仅是一个大致的过程,实际上还有很多细节和额外的步骤,比如缓存机制、重定向、Cookie处理等等。不同的浏览器、服务器也可能有些许差异。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值