当前位置:首页 > Web开发 > 正文

灵魂拷问第3篇:说一说从输入URL到页面泛起产生了什么?

2024-03-31 Web开发

这是一个可以无限难的问题。出这个标题问题的目的就是为了考察你的 web 根本深入到什么水平。由于水安然安祥篇幅有限,在这里我将把此中一些重要的过程给大家梳理一遍,相信能在绝大部分的情况下给出一个对照惊艳的答案。

这里我提前声明,由于是一个综合性非常强的问题,可能会在某一个点上深挖出非常多的细节,我小我私家感受学习是一个循序渐进的过程,在大白了整体过程后再去本身研究这些细节,会对整个常识体系有更深的理解。同时,关于延申出来的细节点我都有参考资料,看完这篇之后不妨事再去深入学习一下,扩展常识面。

好,正题开始。

此时而今,你在浏览器地点栏输入了百度的网址:

https://www.baidu.com/ 复制代码 网络请求 1. 构建请求

浏览器会构建请求行:

// 请求要领是GET,路径为根路径,HTTP协议版本为1.1 GET / HTTP/1.1 复制代码 2. 查找强缓存

先查抄强缓存,如果命中直接使用,否则进入下一步。关于强缓存,如果不清楚可以参考上一篇文章。

3. DNS解析

由于我们输入的是域名,而数据包是通过IP地点传给对方的。因此我们需要得到域名对应的IP地点。这个过程需要依赖一个处事系统,这个系统将域名和 IP 一一映射,我们将这个系统就叫做DNS(域名系统)。得到具体 IP 的过程就是DNS解析。

固然,值得注意的是,浏览器供给了DNS数据缓存成果。即如果一个域名已经解析过,那会把解析的功效缓存下来,下次措置惩罚惩罚直接走缓存,不需要颠末 DNS解析。

此外,如果不指定端口的话,默认给与对应的 IP 的 80 端口。

4. 成立 TCP 连接

这里要提醒一点,Chrome 在同一个域名下要求同时最多只能有 6 个 TCP 连接,赶过 6 个的话剩下的请求就得期待。

假设此刻不需要期待,我们进入了 TCP 连接的成立阶段。首先解释一下什么是 TCP:

TCP(Transmission Control Protocol,传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层通信协议。

成立 TCP连接经历了下面三个阶段:

通过三次握手(即总共发送3个数据包确认已经成立连接)成立客户端和处事器之间的连接。

进行数据传输。这里有一个重要的机制,就是接收方接收到数据包后必需要向发送方确认, 如果发送方没有接到这个确认的动静,就判定为数据包丢掉,并从头发送该数据包。固然,发送的过程中还有一个优化计谋,就是把大的数据包拆成一个个小包,依次传输到接收方,接收方凭据这个小包的挨次把它们组装成完整数据包。

断开连接的阶段。数据传输完成,此刻要断开连接了,通过四次挥手来断开连接。

读到这里,你应该大白 TCP 连接通过什么手段来保证数据传输的可靠性,一是三次握手确认连接,二是数据包校验保证数据达到接收方,三是通过四次挥手断开连接。

固然,如果再深入地问,好比为什么要三次握手,两次不行吗?第三次握手掉败了怎么办?为什么要四次挥手等等这一系列的问题,涉及计算机网络的根本常识,对照底层,但是也长短常重要的细节,但愿你能好好研究一下,此外这里有一篇不错的文章,点击进入相应的保举文章,相信这篇文章能给你启发。

5.发送 HTTP 请求

此刻TCP连接成立完毕,浏览器可以和处事器开始通信,即开始发送 HTTP 请求。浏览器发 HTTP 请求要携带三样对象:请求行请求头请求体

首先,浏览器会向处事器发送请求行,关于请求行, 我们在这一部分的第一步就构建完了,贴一下内容:

// 请求要领是GET,路径为根路径,HTTP协议版本为1.1 GET / HTTP/1.1 复制代码

布局很简单,由请求要领请求URIHTTP版本协议构成。

同时也要带上请求头,好比我们之前说的Cache-ControlIf-Modified-SinceIf-None-Match都由可能被放入请求头中作为缓存的标识信息。固然了还有一些其他的属性,列举如下:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3 Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9 Cache-Control: no-cache Connection: keep-alive Cookie: /* 省略cookie信息 */ Host: Pragma: no-cache Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1 复制代码

最后是请求体,请求体只有在POST要领下存在,,常见的场景是表单提交

网络响应

HTTP 请求达随处事器,处事器进行对应的措置惩罚惩罚。最后要把数据传给浏览器,也就是返回网络响应。

跟请求部分类似,网络响应具有三个部分:响应行响应头响应体

响应行类似下面这样:

HTTP/1.1 200 OK 复制代码

由HTTP协议版本、状态码和状态描述构成。

响应头包罗了处事器及其返回数据的一些信息, 处事器生成数据的时间、返回的数据类型以及对即将写入的Cookie信息。

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/32102.html