Skip to content
On this page

1 面试套话:

“检查缓存、先解析 URL、然后 DNS 域名解析、再发起 HTTP 请求建立 TCP 连接、服务端响应返回页面资源进行渲染、然后断开 TCP 连接”

2 详细过程:

  1. (找)DNS 解析 -> 寻找哪台机器上有你需要资源 根据网址找 IP

  2. TCP 连接 -> 客户端和服务器,TCP 作为其传输层协议

  3. 发送 HTTP 请求 -> HTTP 报文是包裹在 TCP 报文中发送的 请求行,请求报头,请求正文

  4. 服务器处理请求并返回 HTTP 报文 -> 状态码,响应报头和响应报文。

  5. 浏览器解析渲染页面 -> 浏览器在收到 HTML,CSS,JS 文件后依次渲染

  6. 连接结束 -> 断开 TCP 连接 四次挥手

3 具体实现:

1)DNS解析 -> 寻找哪台机器上有你需要资源

所以互联网设计者需要在用户的方便性与可用性方面做一个权衡,这个权衡就是一个网址到IP地址的转换,这个过程就是DNS解析。

image.png

. -> .com. -> google.com. -> www.google.com.

2)TCP连接

HTTP协议是使用TCP作为其传输层协议的,当TCP出现瓶颈时,HTTP也会受到影响。

TCP提供一种可靠的传输,这个过程涉及到三次握手,四次挥手 -> 客户端和服务器

建立连接的过程是利用客户服务器模式,假设主机A为客户端,主机B为服务器端。

3)发送HTTP请求

连接建立成功之后,浏览器会构建请求行、cookie等数据附加到请求头中,发给服务器,服务器接受请求并解析

HTTP报文是包裹在TCP报文中发送的,服务器端收到TCP报文时会解包提取出HTTP报文。

发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口。

♥ 请求报文由请求行,请求报头,请求正文组成。

请求行:请求行的格式为Method Request-URL HTTP-Version CRLFeg: GET index.html HTTP/1.1常用的方法有:GET,POST,PUT,DELETE,OPTIONS,HEAD。

请求报头:请求报头允许客户端向服务器传递请求的附加信息和客户端自身的信息。

请求正文:当使用POST, PUT等方法时,通常需要客户端向服务器传递数据。这些数据就储存在请求正文中。

4)服务器处理请求并返回HTTP报文

♥ HTTP响应报文也是由三部分组成:状态码,响应报头和响应报文。

状态码:404之类的

响应报头:常见的响应报头字段有: Server, Connection...。

响应报文:服务器返回给浏览器的文本信息,通常HTML, CSS, JS, 图片等文件就放在这一部分。

5)浏览器解析渲染页面

浏览器在收到HTML,CSS,JS文件后,它是如何把页面呈现到屏幕上的?

这个图就是Webkit解析渲染页面的过程。

image.png

  • 解析HTML形成DOM树
  • 解析CSS形成CSSOM 树
  • 合并DOM树和CSSOM树形成渲染树
  • 浏览器开始渲染并绘制页面 这个过程涉及两个比较重要的概念回流和重绘,DOM结点都是以盒模型形式存在,需要浏览器去计算位置和宽度等,这个过程就是回流。等到页面的宽高,大小,颜色等属性确定下来后,浏览器开始绘制内容,这个过程叫做重绘。浏览器刚打开页面一定要经过这两个过程的,但是这个过程非常非常非常消耗性能,所以我们应该尽量减少页面的回流和重绘

6)连接结束 断开TCP连接 四次挥手

本章节来自 LeetBook - 力扣(LeetCode)

Released under the MIT License.