浅谈浏览器解析 URL+DNS 域名解析+TCP 三次握手与四次挥手+浏览器渲染页面

2021-05-08 23:26

阅读:642

为了能让我们的知识层面看起来更有深度,我们应该考虑下面两个问题了:

  • 从浏览器输入 URL 到渲染成功的过程中,究竟发生了什么?
  • 浏览器渲染过程中,发生了什么,是不是也有重绘与回流?

OK,兴致来了,我们就先从 浏览器解析 URL 看起,先来看看当用户输入 URL,到浏览器呈现给用户页面,经历了以下过程:

  • 版本 A
  1. 用户输入 URL 地址。
  2. 对 URL 地址进行 DNS 域名解析。
  3. 建立 TCP 连接(三次握手)。
  4. 浏览器发起 HTTP 请求报文。
  5. 服务器返回 HTTP 响应报文。
  6. 关闭 TCP 连接(四次挥手)。
  7. 浏览器解析文档资源并渲染页面。

讲到这里,突然想起一个对话:

学生:“老师,这门课的考试重点是什么?”

老师:“全都是重点!”

enm...老师会不会被打我不知道,但是 jsliang 这样写会被怼我就清楚,所以,咱还是结合上面的图,进一步勾勒我们的结构:

 

技术图片

 

很好,jsliang 感觉自己的画图技术又进了一步~

①:虽然很感激网上有那么多的文章可以参考,但是在我查了二十来篇文章后,jsliang 觉得这部分十有八九有问题撒,问了些小伙伴,它们有的说对,有的说错。不过,不妨碍小伙伴们继续往下看哈。
②:为了避免出篓子,下面贴出另外一个版本,小伙伴们可以在评论区说出你支持哪个版本哈:

  • 版本 B
  1. 用户输入 URL 地址。
  2. 对 URL 地址进行 DNS 域名解析。
  3. 进行 TCP 连接。
  4. 进行 HTTP 报文的请求与响应。
  5. 浏览器解析文档资源并渲染页面。

在这里我们可以清晰的了解到从 用户输入 URL,到浏览器呈现给用户页面,经历了哪些过程

那么剩下的就简单了:

  1. 什么是 DNS 解析,它是怎么个流程?
  2. 什么是 TCP 三次握手,什么是 TCP 四次挥手,它们的流程是怎样的?
  3. 浏览器解析文档资源并渲染页面是个怎样的流程?

Let‘s go~ 逐步完成下面三个知识点!

参考文献 1:《网页解析的全过程(输入url到展示页面)》
参考文献 2:《浏览器渲染页面过程剖析》


评论


亲,登录后才可以留言!