云上舟

# 回车url后，页面的变化过程

# 过程概览

在浏览器的地址栏中，输入了url,并敲击回车之后，到页面渲染完成，这中间大概做了以下几件事:

  1. DNS解析域名
  2. 发送了TCP连接
  3. 发送了HTTP请求
  4. 服务器处理i请求并返回的HTTP响应报文
  5. 浏览器解析渲染页面(提及回流、重绘知识)
  6. 连接结束

# DNS解析

DNS（Domain Name System）解析是指域名解析，在输入url敲击回车后，浏览器将开始域名解析。互联网中，每一台机器都有唯一标识的IP地址，因IP地址不好去记忆，而有了DNS解析，域名并非真实的网络地址，而是IP地址的映射。比如用户键入了www.baidu.com。解析过程就如下所示:

  1. 本地域名服务器寻找
  2. 若本地域名服务器没有，则去根域名服务器寻找"." ("."就是根域名服务器,一般浏览器中，地址栏尾部的根域名会被省略，浏览器在请求DNS的时候会自动加上)
  3. 若根域名服务器没有，则去顶级域名服务器寻找".com"
  4. 以上述方式类推，当找到对应映射

TIP

1、IP地址

容易理解而又不太准确的说，IP地址是电脑在网络中的唯一标识，局域网IP是限于局域网内可以相互访问的电脑；公网中的固定IP，可以说是电脑在公网网络中的唯一标识。

2、DNS（Domain Name System）域名服务系统，简单的说就是域名与IP转换服务（负责将你输入的域名转换为IP，类似于电话本，把你拨打电话的名字转换为手机号）。

网络真正的访问是通过IP来实现的，但是IP地址像电话一样不好记（或者大部分时候百度、淘宝等网站为了负载均衡和大规模访问其实有很多IP地址的），这时候大家都是用域名（如www.baidu.com）比较好记住的地址。

www.baidu.com如何转换为百度的IP呢？就是通过DNS服务（就类似于一个巨型、记录了全世界ip与域名的电话本），指定到对应的IP服务器。

# 发送TCP请求

TCP提供一种可靠的传输，这个过程总涉及到三次握手、四次挥手。

# 三次握手

  • 第一次握手：客户端发送syn包，及序列号seq=x。
  • 第二次握手: 服务端发送syn包,ack确认报文（为接收到客户端序列号seq+1),序列号 seq=y
  • 第三次握手: 客户端发送确认报文(为接收到服务端序列号+1),序列号seq=Z

TIP

位码即tcp标志位，有6种标示：

① SYN(synchronous建立联机)；

② ACK(acknowledgement 确认)

③ PSH(push传送)

④ FIN(finish结束)

⑤ RST(reset重置)

⑥ URG(urgent紧急)

Sequence number(顺序号码) //Acknowledge number(确认号码)

# 四次挥手

四次挥手即终止TCP连接，指的是断开一个TCP连接时，需要客户端和服务端总共发送4个包以确认连接的断开。在socket编程中，这一过程由客户端或服务端任一方执行close来触发。

# 挥手原则

由于TCP连接是全双工的，因此，每个方向都必须要单独进行关闭。当一方完成数据发送的任务后，发送一个FIN来终止这一方向的连接，收到一个FIN只意味着这一方向上没有数据流动了，既不会在收到数据了，但是这个TCP连接上，仍然能够发送数据。直到这一方向也发送了FIN。首先进行关闭的一方将执行主动关闭，而另一方则执行被动关闭。

# 过程

  1. TCP客户端发送一个FIN报文，用来关闭客户到服务器的数据传送
  2. 服务器收到FIN报文，返回一个ACK报文，确认序号为收到的序号+1,。和SYN一样，一个FIN报文将占用一个序号。
  3. 服务器关闭客户端的连接，发送一个FIN给客户端。
  4. 客户端返回ACK报文确认，确认号为收到序号+1

# 发送HTTP请求

TIP

HTTP的端口为80/8080，而HTTPS的端口为443

发送HTTP请求的过程是构建HTTP请求报文，并通过TCP协议中发送到服务器指定端口。请求报文由三部分组成: 请求头/请求报头、请求行、请求正文。

# 请求行

格式为: Method Request-URL HTTP-Version CRLF eg: GET index.html HTTP/1.1,常见的请求方法有:

  1. GET
  2. POST
  3. DELETE
  4. PUT
  5. OPTIONS
  6. HEAD

# 请求方法之间的区别

拿常用的GET和POST举例，它们之间有以下区别

  1. GET在浏览器回退时是无害的，而POST会再次提交请求。(post每次调用都会创建新的资源。而get会将请求参数放在请求的url中，回退时浏览器从之前的缓存中拿结果。参见下列第3、5条)
  2. GET产生的URL地址可以被Bookmark，而POST不可以
  3. GET请求会被浏览器主动cache,而POST不会，除非手动设置。
  4. GET请求只能进行url编码，而POST支持多种编码方式。
  5. GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
  6. GET比POST更不安全，因为参数直接暴露在URL上，所不能用来传递敏感信息。
  7. GET参数通过URL传递，POST放在Request body中传递。

# GET和POST发送数据包的次数区别

GET会发送一个TCP数据包，而POST发送2个TCP数据包。

  • GET请求，浏览器会将http header和data一并发出去。服务器响应200
  • POST请求，浏览器会先发http header，服务器响应100 continue,最后在发送data,服务器响应200

WARNING

​ 但这一点在不同技术网站上有所争议。仅供参考。(并非所有浏览器都发送2次，Firefox就发送一次)。

# 请求报头

请求报头允许客户端向服务器传递请求的附加信息和客户端自身信息。请求报头中使用了Accept, Accept-Encoding, Accept-Language, Cache-Control, Connection, Cookie等字段。

  • Accept用于指定客户端用于接受哪些类型的信息，Accept-Encoding与Accept类似，它用于指定接受的编码方式。
  • Connection设置为Keep-alive用于告诉客户端本次HTTP请求结束之后并不需要关闭TCP连接，这样可以使下次HTTP请求使用相同的TCP通道，节省TCP连接建立的时间。

TIP

通常情况下，开发者会在axios中的拦截器interceptor.request.use）,设置请求头，比如authorization: bear token)等

# 请求正文

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

TIP

​ 现在的Web应用通常采用Rest架构，请求的数据格式一般为json，这时就需要在请求报头中设置 Content-Type: application/json 。

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

它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。这一部分工作一般是由Web服务器去进行。HTTP报文也分成三份:

  1. 状态码
  2. 响应报头
  3. 响应正文

# 状态码

它是由三位数组成，第一个数字定义了相应的类别，且有五种可能取值:

  • 1xx: 指示信息-表示请求已接收，继续处理。
  • 2xx: 成功-表示请求已被成功接收。
  • 3xx: 重定向-要完成请求必须进行进一步的操作。
  • 4xx: 客户端错误-请求有语法错误或请求无法实现
  • 5xx: 服务器端错误-服务器未能实现合法的请求。

# 常见的状态码

# 200 成功

请求成功，服务器提供了需要的资源

# 204 无内容

服务器成功处理了请求，但没有返回任何内容

# 301 永久移动

请求的网页已移动到新位置，返回(GET或POST)响应时，会自动将请求者转到新位置。

# 302 临时移动

服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

# 304 未修改

GET请求一被允许，而文档内容并没有改变。（服务端已经执行了GET，但文件未变化。）

# 400 错误请求

服务器不理解请求的语法

# 401 未授权

请求要求身份验证，对于需要登录的网页，服务器可能返回此相应。

# 403 禁止

服务器拒绝请求

# 404 未找到

服务器找不到请求的网页

# 422 无法处理

请求格式正确，但是由于含有语义错误，无法响应

# 500 服务器内部错误

服务器遇到错误，无法完成请求。

# 502 Bad Gateway

作为网关或代理工作的服务器，尝试执行请求是，从上游服务器接收到无效的响应。

# 响应报头

用于服务器传递自身信息的响应，常见的有:

  • Allow: 服务器支持哪些方法(GET POST...)
  • LOCATION: 用于重定向接收者到一个新位置，常用在更换域名的时候。
  • Server: 包含可服务器用来处理请求的系统信息，与User-Agent请求报头是相对应的。
  • Access-Control-Allow-Origin: 指定哪些站点可以参与跨站资源共享。

# 响应正文

服务器返回的资源内容

# 浏览器解析渲染页面

  • 解析HTML形成DOM树
  • 解析CSS形成CSSOM 树
  • 合并DOM树和CSSOM树形成渲染树
  • 浏览器开始渲染并绘制页面

# 什么是回流？

当渲染树中有部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染这些元素的过程，称之为回流。

# 哪些操作会引起回流？

  1. 元素的尺寸、位置、文字大小、内容发生变化
  2. 浏览器窗口大小变化
  3. 添加或删除可见的DOM元素
  4. 激活CSS伪类(如:hover)
  5. 页面首次渲染

# 什么是重绘？

当页面中元素样式的改变并不影响它在文档流中的位置时(如:color、background-color、visibility等)，浏览器将新样式赋予元素并重新绘制它，这个过程称为重绘。

← 实现bind、apply、call →