【浏览器】在浏览器输入URL回车之后发生了什么?

在浏览器输入URL回车之后发生了什么?

    • 输入URL
    • DNS解析
    • TCP三次握手
    • 发送HTTP请求
    • 响应HTTP请求
    • 页面渲染

输入URL

  • 把已知的网址输入到浏览器的搜索栏里

我是一款浏览器,我今天起床后感觉身体不舒服,所以我想要去看病,那么我就在浏览器的搜索栏上输入地址,但是明显我在家里是不能处理病情的,我得去医院,我们上网的第一步很明显也就是输入网址,把已知的网址输入到浏览器的搜索栏里。

详解URL的组成

DNS解析

  • 浏览器从url中解析出服务器的主机名,将服务器的主机名转换成服务器的IP地址(DNS)再将端口号从url中解析出来。

到了医院后第一件事就是挂号,我把自己的身体状况告诉了挂号小姐姐,小姐姐查了一下病情对应的科目,然后告诉我,我应该去内科,并且 还告诉我内科在负一楼,拿到挂号单的我就可以根据地址去找医生看病了,我们在浏览器输入URL实际上还不能找到服务器的地址,这些由字母组成的URL只是方便我们记忆而已,实际上每个网址都会有相应的ip地址,而ip地址是由数字组成的,不方便人们记忆,所以这里我们需要进行DNS解析把URL地址解析为ip地址这一过程就叫DNS解析。
其实DNS就是一个数据库,这个数据库里面记录着很多URL和对应的ip地址,这样大家就可以根据DNS查找到对应的ip地址,有了ip地址,我们就可以在互联网里找到指定的服务器了,去医院看病也是一样,我们得先知道我们的病情对应的科目,这样才能知道科目对应的具体地址。

TCP三次握手

  • 浏览器建立一条与web服务器的TCP连接

长那么大,还是第一次来内科,心情很紧张,但是我还是得确定里面有没有人,于是我敲了一下门,过了几秒,我听到了医生的声音:“进来吧”,我深呼了一口气进去了,虽然我们知道了具体的ip地址,但是在正式发送数据之前还是得建立TCP连接,为什么需要建立TCP连接呢?大家想想如果医生不在房间里面或者有其他病人在房间里,这样我们无法就诊,建立TCP连接就是要在发送数据之前建立通道,客户端和服务端建立通道就可以在这个通道里发送数据了,大家都在这个通道里发送数据,这样数据就不容易发生错乱了,于是就有了建立通道前的三次握手。
【浏览器】在浏览器输入URL回车之后发生了什么?_第1张图片
客户端发送SYN数据包来表示请求连接,服务器响应SYN和ACK的数据包来表示同意建立连接,客户端再发送ACK数据包来表示成功连接;我们要进别人门之前也一样,先敲门请求进门,得到回应以后才表示同意进门,最后我进门以后就表示可以开始就诊了。

发送HTTP请求

  • 浏览器向服务器发送一条HTTP的请求报文

进入医生房间后,我感觉房间很温馨,于是就开始叙述自己的病情,“医生,我今天起床后感觉身体不舒服,所以我想来医院治疗一下”,这就是我和医生说的治病请求;如果用表格的形式来看就是这样的:

我是空行 我是空行
请求行 到医院获得治疗
请求头部 名字:喜羊羊
空行
请求数据 感觉不舒服

那么当我们和服务器建立连接以后,浏览器是会发送HTTP请求报文给服务器,报文的格式就是由请求行,请求头部,空行和请求数据组成,请求行里面由请求方法,请求地址和HTTP协议版本组成,请求头部就是一些关于浏览器的信息,由键值对组成,一行一对,直到遇到空行就表示下面没有请求头部了,最后就是请求数据,毕竟我们具体需要什么数据,需要什么样的形式获取数据是需要一五一十告诉服务器的,这样服务器才知道我们想要获取什么信息;我们去医院看病也是得告诉医生我们的症状,这样医生才能初步诊断我们的病情,毕竟不是每个医生把一下脉就知道你病的详情。

我是空行 我是空行
请求行 authority:www.bilibili.com method:GET
请求头部 user-agent :Mozilla/5.0
空行
请求数据

响应HTTP请求

  • 服务器向浏览器回送一条HTTP的响应报文

医生听完我的病情的叙述以后,三下五除二地说:“你有病,你确实生病了,我很有信心治好你的病,我这就给你手术”,如果用表格地形式来看医生地话就是这样的,当服务器收到HTTP请求报文以后,服务器会处理请求报文,并且做出响应。响应报文和请求报文非常相似,报文的格式由状态行,响应头部,空行和响应数据组成

我是空行 我是空行
状态行 你有病
响应头部 内科:主任医生
空行
请求数据 为你开药

状态行最重要的就是那三位数字,比如常见的404 Not Found表示资源没找到的错误,另外最常见的是200,表示请求成功,响应头部由键值对组成,一行一对,直到遇到空行就表示下面没有响应头部了,最后就是响应数据,有求必应一直以来都是医生的职业操守,病人发出请求,医生做出响应。

我是空行 我是空行
状态行 status Code 200
响应头部 content-type:text/html;charset=utf-8
空行
请求数据

页面渲染

  • 关闭连接,浏览器渲染

现在医生让我躺在手术台上,并且告诉我手术的危险性,于是就按照刚才的诊断对我实施各种操作,没过一会,手术完成了。浏览器在接收到服务器的响应以后,页面就会开始渲染了,也就是解析接收到的HTML,CSS和JavaScript等文件,有了这些前端文件后,用户就可以在前端看到页面内容,也就是在浏览器里看到内容了。

这就是浏览器输入URL回车之后发生的事情了。

你可能感兴趣的:(浏览器,javascript,前端,es6)