Antech 2019-12-21
为了能让我们的知识层面看起来更有深度,我们应该考虑下面两个问题了:
OK,兴致来了,我们就先从 浏览器解析 URL 看起,先来看看当用户输入 URL,到浏览器呈现给用户页面,经历了以下过程:
讲到这里,突然想起一个对话:
学生:“老师,这门课的考试重点是什么?”
老师:“全都是重点!”
enm...老师会不会被打我不知道,但是 jsliang 这样写会被怼我就清楚,所以,咱还是结合上面的图,进一步勾勒我们的结构:
很好,jsliang 感觉自己的画图技术又进了一步~
①:虽然很感激网上有那么多的文章可以参考,但是在我查了二十来篇文章后,jsliang 觉得这部分十有八九有问题撒,问了些小伙伴,它们有的说对,有的说错。不过,不妨碍小伙伴们继续往下看哈。
②:为了避免出篓子,下面贴出另外一个版本,小伙伴们可以在评论区说出你支持哪个版本哈:
- 版本 B
- 用户输入 URL 地址。
- 对 URL 地址进行 DNS 域名解析。
- 进行 TCP 连接。
- 进行 HTTP 报文的请求与响应。
- 浏览器解析文档资源并渲染页面。
在这里我们可以清晰的了解到从 用户输入 URL,到浏览器呈现给用户页面,经历了哪些过程。
那么剩下的就简单了:
Let‘s go~ 逐步完成下面三个知识点!
参考文献 1:《网页解析的全过程(输入url到展示页面)》
参考文献 2:《浏览器渲染页面过程剖析》
首先,我们解决第一个问题:
DNS(Domain Name System)是 域名系统 的英文缩写,提供的服务是用于将主机名和域名转换为 IP 地址的工作:
域名:http://jsliang.top
<---> DNS <---> IPV4:119.147.15.13
IPV4 是造假的,仅用来说明 DNS 解析后能返回 IP 地址
所以,当用户在浏览器输入 http://jsliang.top
时,DNS 经历了以下步骤:
看文字总是难以理解的,跟着 jsliang 画张图过一遍,就感觉清晰了:
然后,我们解决第二个问题:
什么是 TCP 呢?TCP(Transmission Control Protocol 传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层通信协议。
简单来说,它的作用就是将数据流从一台主机可靠地传输到另一台主机。
至于具体的工作原理,这里暂时涉及不到,我们目前只想知道两个点:三次握手与四次挥手。
seq = x
,并将该数据包发送给 Server,Client 进入 SYN-SENT 状态,等待 Server 确认。SYN = 1
得知 Client 请求建立连接,Server 将标志位 SYN 和 ACK 都置为 1,ack = x + 1
,随机产生一个值 seq = y
,并将该数据包发送给Client以确认连接请求,Server 进入 SYN-RCVD
状态,此时操作系统为该 TCP 连接分配 TCP 缓存和变量。x + 1
,ACK 是否为 1,如果正确则将标志位 ACK 置为 1,ack = y + 1
,并且此时操作系统为该 TCP 连接分配 TCP 缓存和变量,并将该数据包发送给 Server,Server 检查 ack 是否为 y + 1
,ACK 是否为 1,如果正确则连接建立成功,Client 和 Server 进入 established 状态,完成三次握手,随后 Client 和 Server 就可以开始传输数据。文字太乱,show you picture:
FIN = 1
,序号 seq = u
),并停止再发送数据,主动关闭 TCP 连接,进入 FIN-WAIT-1(终止等待1)状态,等待 Server 的确认。ACK = 1
,确认号 ack = u + 1
,序号 seq = v
),Server 进入 CLOSE-WAIT(关闭等待)状态,此时的 TCP 处于半关闭状态,Client 到 Server 的连接释放。注:Client 收到 Server 的确认后,进入 FIN-WAIT-2(终止等待2)状态,等待 Server 发出的连接释放报文段。
FIN = 1
,ACK = 1
,序号 seq = w
,确认号 ack = u + 1
),Server 进入 LAST-ACK(最后确认)状态,等待 Client 的确认。ACK = 1
,seq = u + 1
,ack = w + 1
),Client 进入 TIME-WAIT(时间等待)状态。此时 TCP 未释放掉,需要经过时间等待计时器设置的时间 2MSL 后,Client 才进入 CLOSED 状态。文字太乱,show you picture:
OK,至此我们就理解了 TCP 及其三次握手和四次挥手过程,为了方便小伙伴们形象记忆,jsliang 搞了个小故事,希望小伙伴们能加深印象:
OK,成功出糗,相信小伙伴们有了个很好的了解了。
那么,我们继续前行探索。
参考文献 1:《TCP三次握手和四次挥手过程》
参考文献 2:《TCP的三次握手与四次挥手(详解+动图)》
最后,我们解决第三个问题:
话不多说,一起来看:
文字讲解肯定还是不够清晰的,但是 jsliang 画了几张图也累了,所以咱们 盗 来了一张图:
这样,我们就对 浏览器渲染页面过程 一清二楚啦~
参考文献:《一篇文章搞定前端面试》
至此,我们回顾下自己做了什么?
综上,如果我们仅仅是需要关注面试的一个点,我们很可能因为不知头尾,而被面试官问得哑口无言。
但是,如果我们知道一个知识点,并对其进行思路发散,深入学习,相信面试官问起来的时候,小伙伴们就可以侃侃而谈,而不会被问地体无完肤了!
.