关于后端:当你在浏览器搜索框中输入内容并按下回车会发生什么

8次阅读

共计 5488 个字符,预计需要花费 14 分钟才能阅读完成。

在浏览器的地址栏输出一个 URL 后回车,都通过了那些步骤后才会显示一个界面给咱们?

在浏览中输出 URL 并且获取响应的过程,其实就是浏览器和该 URL 对应的服务器的网络通信过程。比方咱们输出 www.baidu.com,那么会返回一个百度搜寻的界面,这其实就是浏览器和百度服务器之间的网络通信过程。浏览器就是客户端,用于发出请求,而百度的服务器就是服务端,用于接管并响应申请。

它次要通过以下几个步骤:

1. DNS 域名解析

DNS 协定是用来将域名转换为 IP 地址(也能够将 IP 地址转换为相应的域名地址)
解析过程大抵分为以下六步骤:

  1. 在浏览器中输出 www.baidu.com 域名,操作系统会先查看本人本地的 hosts 文件是否有这个网址映射关系,如果有,就先调用这个 IP 地址映射,实现域名解析。
  2. 如果 hosts 里没有这个域名的映射,则查找 本地 DNS 解析器缓存(浏览器在拜访一个网站后,会将对应的 DNS 解析记录保留在本地),是否有这个网址映射关系,如果有,间接返回,实现域名解析。
  3. 如果 hosts 与本地 DNS 解析器缓存都没有相应的网址映射关系,首先会找 TCP/IP 参数中设置的首选 DNS 服务器,在此咱们叫它本地 DNS 服务器,本地 DNS 服务器查问对应的域名映射,如果蕴含在本地配置区域资源中,则返回解析后果给客户机。
  4. 如果要查问的域名,不禁本地 DNS 服务器区域解析,但该服务器已缓存了此网址映射关系,则调用这个 IP 地址映射,实现域名解析,此解析不具备权威性。
  5. 如果本地 DNS 服务器本地区域文件与缓存解析都生效,则依据本地 DNS 服务器的设置(是否设置转发器)进行查问,如果未用转发模式,本地 DNS 就把申请发至 13 台根 DNS,根 DNS 服务器收到申请后会判断这个域名 (.com) 是谁来受权治理,并会返回一个负责该顶级域名服务器的一个 IP。本地 DNS 服务器收到 IP 信息后,将会分割负责.com 域的这台服务器。这台负责.com 域的服务器收到申请后,如果本人无奈解析,它就会找一个治理.com 域的下一级 DNS 服务器地址 (baidu.com) 给本地 DNS 服务器。当本地 DNS 服务器收到这个地址后,就会找 baidu.com 域服务器,反复下面的动作,进行查问,直至找到 www.baidu.com 主机。
  6. 如果用的是转发模式,此 DNS 服务器就会把申请转发至上一级 DNS 服务器,由上一级服务器进行解析,上一级服务器如果不能解析,或找根 DNS 或把转申请转至上下级,以此循环。最初把后果返回给本地 DNS 服务器,由此 DNS 服务器再返回给客户机,从客户端到本地 DNS 服务器是属于递归查问,而 DNS 服务器之间就是的交互查问就是迭代查问。

如果是一个不存在的域名,那么浏览器的工作流程会是怎么样的呢?
不存在的域名也会去解析,先执行域名解析的步骤:先拜访本地缓存(浏览器缓存,而后是操作系统缓存、host 文件)找不到则再逐级 DNS(家养 DNS 服务器 - 根 - 顶级 - 权威),都执行完还是找不到就报错。

域名解析门路
浏览器缓存 -> 操作系统 dnscache ->hosts 文件 -> 非权威域名服务器 -> 根域名服务器 -> 顶级域名服务器 -> 二级域名服务器 -> 权威域名服务器。
其中非权威域名服务器还包含 LDNS(企业内网 DNS 服务器),三大营运商 DNS,谷歌公开的 DNS,微软公开的 DNS 等。

2. 建设 TCP 连贯

TCP/IP 协定实际上是一系列网络通信协定的统称,其中最外围的两个协定是 TCP 和 IP,其余的还有 UDP、ICMP、ARP 等等,独特形成了一个简单但有档次的协定栈。这个协定栈有四层,最上层是“应用层”,最上层是“链接层”,TCP 和 IP 则在两头:TCP 属于“传输层”,IP 属于“网际层”
IP 协定是为了解决互联网拜访中的寻址路由问题,IP 指的是服务器在互联网下面的地址。
TCP 协定是“Transmission Control Protocol”的缩写,意思是“传输控制协议 ”,它位于 IP 协定之上,基于 IP 协定提供牢靠的、字节流模式的通信,是 HTTP 协定得以实现的根底。
牢靠”是指保证数据不失落,“字节流”是指保证数据残缺。

三次握手整个过程分为五步:

  1. 客户端和服务器端都处于 CLOSE 状态,此时客户端被动关上连贯,服务端被动关上连贯,服务端状态变为 listen
  2. 客户端会随机初始化一个 序号(client_isn),将这个序号置于 TCP 首部的 序号 字段,同时将 SYN 标记 置为 1,表明是一个 SYN 报文,而后将这个 SYN 报文发送给服务端,此时客户端状态变为 syn_sent
  3. 服务端接管到客户端发送的 SYN 报文后,此为第一次握手,服务端会随机初始化本人的 序号(server_isn), 而后将其搁置到 TCP 首部的 序号 字段,同时将 client_isn + 1 搁置到 TCP 首部的 确认应答号 字段,而后将 SYN 和 ACK 字段都置为 1,最初将此报文发送给客户端,此时服务端的状态变为 syn_rcvd
  4. 客户端接管到服务端的报文后,此为第二次握手,客户端此时还要向服务端最初发送一个确认应答报文,首先将 TCP 首部的 ACK 字段置为 1,而后将确认应答号字段置为 server_isn+1,最初再发送给服务端,此时客户端状态为 established
  5. 服务端接管到客户端发送的应答报文后,此为第三次握手,状态也变为 established,至此客户端与服务端就能够正式开始通信了

通过对上述步骤的剖析,咱们能够晓得第一次握手时能够让服务端晓得客户端的 发送能力 是失常的,第二次握手能够让客户端晓得服务端的 发送和接管能力 是失常的,第三次握手能够让服务端晓得客户端的 接管能力 是失常的,至此就能够让通信单方确认了对方的发送和接管能力都失常,而后就能够进行牢靠的通信了

3. 发动 HTTP 申请


HTTP/1.1 里惟一要求 必须提供的头字段是 Host,它必须呈现在申请头里,标记虚拟主机名。

目前 HTTP/1.1 规定了八种办法,单词都必须是大写的模式。
GET:获取资源,能够了解为读取或者下载数据;
HEAD:获取资源的元信息;
POST:向资源提交数据,相当于写入或上传数据;
PUT:相似 POST;
DELETE:删除资源;
CONNECT:建设非凡的连贯隧道;
OPTIONS:列出可对资源履行的办法;
TRACE:追踪申请 – 响应的传输门路。
在当初前端最罕用的 cors 跨域中,浏览器都是用 OPTIONS 办法发预检申请的.

TCP 三次握手实现后,浏览器与指标服务器之间就建设了一个牢靠的虚构通道,于是浏览器就能够发送本人的 HTTP 申请了。
须要留神的是,HTTP 申请报文或者响应报文在 TCP 连贯通道上进行传输的时候,因为这些报文比拟大,为了更容易和精确牢靠的传输,TCP 会将 HTTP 报文按序号宰割成若干报文段并加上 TCP 首部,别离进行传输。接管方在收到这些报文段后,依照序号以原来的程序重组 HTTP 报文。

TTP 协定也是与 TCP/UDP 相似,同样也须要在理论传输的数据前附加一些头数据,不过与 TCP/UDP 不同的是,它是一个“纯文本”的协定,所以头数据都是 ASCII 码的文本,能够很容易地用肉眼浏览,不必借助程序解析也可能看懂。

HTTP 协定的申请报文和响应报文的构造基本相同,由三大部分组成:
起始行(start line):形容申请或响应的根本信息;
头部字段汇合(header):应用 key-value 模式更具体地阐明报文;
音讯注释(entity):理论传输的数据,它不肯定是纯文本,能够是图片、视频等二进制数据。
这其中 前两局部 起始行和头部字段常常又合称为“申请头”或“响应头”,音讯注释又称为“实体”,但与“header”对应,很多时候就间接称为“body”。
HTTP 协定规定报文 必须有 header,但能够没有 body,而且在 header 之后必须要有一个“空行”,也就是“CRLF”,十六进制的“0D0A”。

4. 承受响应后果

HTTP 响应也由三个局部组成,别离是:状态行、相应头部、响应注释。

1. 状态行
HTTP-Version Status-Code Reason-Phrase CRLF

其中,HTTP-Version 示意服务器 HTTP 协定的版本;Status-Code 示意服务器发回的响应状态代码;Reason-Phrase 示意状态代码的文本形容。状态代码由三位数字组成,第一个数字定义了响应的类别,且有五种可能取值。

1xx:批示信息–示意申请已接管,持续解决。
2xx:胜利–示意申请已被胜利接管、了解、承受。
3xx:重定向–要实现申请必须进行更进一步的操作。
4xx:客户端谬误–申请有语法错误或申请无奈实现。
5xx:服务器端谬误–服务器未能实现非法的申请。
常见状态代码、状态形容的阐明如下。

200 OK:客户端申请胜利。
301: 永恒重定向, Location 响应首部的值仍为以后 URL,因而为暗藏重定向。
302: 长期重定向,显式重定向, Location 响应首部的值为新的 URL。
304:Not Modified 未修改,比方本地缓存的资源文件和服务器上比拟时,发现并没有批改,服务器返回一个 304 状态码,通知浏览器,你不必申请该资源,间接应用本地的资源即可。
400 Bad Request:客户端申请有语法错误,不能被服务器所了解。
401 Unauthorized:申请未经受权,这个状态代码必须和 WWW-Authenticate 报头域一起应用。
403 Forbidden:服务器收到申请,然而回绝提供服务。
404 Not Found:申请资源不存在,举个例子:输出了谬误的 URL。
500 Internal Server Error:服务器产生不可预期的谬误。
502: Bad Gateway 后面代理服务器分割不到后端的服务器时呈现。
503 Server Unavailable:服务器以后不能解决客户端的申请,一段时间后可能恢复正常,举个例子:HTTP/1.1 200 OK(CRLF)。
504:Gateway Timeout 这个是代理能分割到后端的服务器,然而后端的服务器在规定的工夫内没有给代理服务器响应

Connection 应用 keep-alive 个性
Content-Encoding 应用 gzip 形式对资源压缩
Content-type MIME 类型为 html 类型,字符集是 UTF-8
Date 响应的日期
Server 应用的 WEB 服务器
Transfer-Encoding:chunked 分块传输编码是 http 中的一种数据传输机制,容许 HTTP 由网页服务器发送给客户端利用(通常是网页浏览器)的数据能够分成多个局部,分块传输编码只在 HTTP 协定 1.1 版本(HTTP/1.1)中提供。

5. 浏览器解析 html

浏览器按程序解析 html 文件,构建 DOM 树,在解析到内部的 css 和 js 文件时,向服务器发动申请下载资源,若是下载 css 文件,则解析器会在下载的同时持续解析前面的 html 来构建 DOM 树,则在下载 js 文件和执行它时,解析器会进行对 html 的解析。这便呈现了 js 阻塞问题。
预加载器:
当浏览器被脚本文件阻塞时,预加载器(一个轻量级的解析器)会持续解析前面的 html,寻找须要下载的资源。如果发现有须要下载的资源,预加载器在开始接管这些资源。预加载器只能检索 HTML 标签中的 URL,无奈检测到应用脚本增加的 URL,这些资源要等脚本代码执行时才会获取。
注: 预解析并不扭转 Dom 树,它将这个工作留给主解析过程
浏览器解析 css,造成 CSSOM 树,当 DOM 树构建实现后,浏览器引擎通过 DOM 树和 CSSOM 树结构出渲染树。渲染树中蕴含可视节点的款式信息(不可见节点将不会被增加到渲染树中,如:head 元素和 display 值为 none 的元素)

值得注意的是,这个过程是逐渐实现的,为了更好的用户体验,渲染引擎将会尽可能早的将内容出现到屏幕上,并不会等到所有的 html 都解析实现之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。

6. 浏览器布局渲染

布局:通过计算失去每个渲染对象在可视区域中的具体位置信息(大小和地位),这是一个递归的过程。
绘制:将计算好的每个像素点信息绘制在屏幕上

7. 总结

在 HTTP 传输数据的过程中,其中会通过很多的“子协定”,他们各司其职,共同完成了数据传输:
TCP——负责数据传输
IP——负责标识传输对象
DNS——负责简化人类的记忆
URI/L——负责标识传输的资源
SSL——负责数据传输的平安
Proxy——负责信息的直达
像极了走标,
须要搞清楚从哪到哪——IP
须要搞定怎么传输——TCP
须要保障货物的平安——SSL
须要送货的具体位置——URI
须要把目的地的经纬度换成地址名——DNS
须要两头直达一下——Proxy
HTTP——我不论那么多,我向你要什么你就给什么

其实整个的传输过程能够简化为一次送快递的过程:
假如你想把一件毛绒玩具送给敌人,但你要先拿个塑料袋套一下,这件玩具就相当于 HTTP 协定里要传输的内容,比方 HTML,而后 HTTP 协定为它加一个 HTTP 专用附加数据。
你把玩具交给快递小哥,为了爱护货物,他又加了层包装再贴了个标签,相当于在 TCP 层给数据再次打包,加上了 TCP 头。
接着快递小哥下楼,把包裹放进了三轮车里,运到集散点,而后再装进更大的卡车里,相当于在 IP 层、MAC 层对 TCP 数据包加上了 IP 头、MAC 头。
之后通过漫长的运输,包裹达到目的地,要卸货再放进另一位快递员的三轮车,就是在 IP 层、MAC 层传输后拆包。
快递员到了你敌人的家门口,撕掉标签,去除了 TCP 层的头,你敌人再拆掉塑料袋包装,也就是 HTTP 头,最初就拿到了玩具,也就是真正的 HTML 页面。

正文完
 0