前端基础整理 | 网络相关（一）

发表于 阅读次数：

整理前端需要掌握的一些网络相关的基础知识和面试题。

本文的题目整理自大佬文章，语句自己稍作处理，其他内容来自网络和《图解 HTTP》一书，都是网络相关的。

HTTP

HyperText Transfer Protocol，超文本传输协议。TCP/IP 协议族的一个子集。用于客户端与服务器间的通信。是一种 无状态协议。为了实现保持状态的功能，引入了 Cookie 技术。目前主流版本 HTTP 1.0（广泛使用在服务器端） 和 HTTP 1.1（当前最新版）。

TCP/IP协议族概要

计算机和网络设备需要相互通信，双方必须基于相同的方法。比如，如何探测到通信设备、由哪一方现发起通信、使用哪种语言通信、怎样结束通信等都需要事先确定规则，我们把这种规则称之为协议(protocol)。

TCP/IP 协议是互联网相关连的协议的集合的总称，包括 TCP、IP、UDP、HTTP、DNS、FTP...等等

TCP/IP 协议的其他两种说法：

  1. 指 IP 和 TCP 两种协议；
  2. 在 IP 协议在通信过程中，使用到的协议族的统称。

TCP/IP 的分层管理

TCP/IP 协议族中最重要的一点就是分层。

TCP/IP 协议族分为 4 层：

  1. 应用层
  2. 传输层
  3. 网络层
  4. 数据链路层

分层后的好处：如果互联网只由一个协议统筹，某个地方需要改变设计时，就需要把所有的部分整体替换掉。分层之后，只需要把变动的层替换掉即可。把各层之间的接口设计后后，各层内部就能自由改动了。

1、应用层

应用层决定了向用户提供应用服务时通信的活动。

TCP/IP 协议族内置了各类通用的应用服务。如 FTP(File Transfer Protocol，文件传输协议) 和 DNS(Domain Name System，域名系统)。 HTTP 协议也属于应用层。

2、传输层

为「应用层」提供处于网络连接中的两台计算机之间的数据传输。

该层的有两个性质不同的协议：TCP（Transmission Control Protocol，传输控制协议） 和 UDP（User Data Protocol，用户数据报协议）。

3、网络层（又网络互联层）

该层用来处理在网络上流动的数据包。数据包是网络传输的最小单位。

该层规定了通过怎样的路径（即传输路线）到达对方计算机，并把数据包传输给对方。与对方计算机之间通过多台计算机或者网络设备进行传输时，网络层的作用就是在众多选项内选择一条传输路线。

4、链路层

又名数据链路层，网络接口层

用来处理连接网络的硬件部分。包括控制操作系统、硬件设备的驱动、NIC（网络适配器）及光纤等物理可见部分（还包括连接器等一切传输媒介）。

TCP/IP 通信传输

发送端从应用层往下走，接收端从应用层往上走。

http://static.brandhuang.com/tcp-ip%20transfer.png

http://static.brandhuang.com/tcp-ip%20transfer%20detail.png

Cookie：

服务器发送到用户浏览器，并存储在本地的一段一般不超过 4KB 的小型文本数据。

服务器指定 cookie 后，浏览器每次请求都会携带 cookie。

Cookie主要用于以下三个方面：

  • 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
  • 个性化设置（如用户自定义设置、主题等）
  • 浏览器行为跟踪（如跟踪分析用户行为等）
  1. 客户端发送 HTTP 请求到服务器
  2. 当服务器收到 HTTP 请求时，在响应头里面添加一个 Set-Cookie 字段
  3. 浏览器收到响应后保存下 Cookie
  4. 之后每一次请求中都通过 Cookie 字段将 Cookie 信息发送给服务器。

浏览器关闭之后它会被自动删除,不需要指定过期时间（Expires）或者有效期（Max-Age）

注意：有的浏览器提供了会话恢复功能，即使关闭了浏览器，会话期 cookie 依然会被保存下来，就像没关闭浏览器一样

持久性Cookie可以指定一个特定的过期时间（Expires）或有效期（Max-Age）。

标记为 Secure 的Cookie只应通过被HTTPS协议加密过的请求发送给服务端。

为避免跨域脚本 (XSS) 攻击，通过 JavaScript 的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie，

Domain 和 Path 标识定义了Cookie的作用域.

Domain 标识指定了哪些主机可以接受Cookie。如果不指定，默认为当前文档的主机（不包含子域名）。如果指定了Domain，则一般包含子域名。

例如：设置 Domain = brandhuang.com，则 cookie 也包含子啊子域名中，如 api.brandhuang.com、static.brandhuang.com等

Path 标识指定了主机下的哪些路径可以接受Cookie

例如，设置 Path=/docs，则以下地址都会匹配：

  • /docs
  • /docs/Web/
  • /docs/Web/HTTP
SameSite Cookies

SameSite Cookie允许服务器要求某个cookie在跨站请求时不会被发送，从而可以阻止跨站请求伪造攻击（CSRF）

SameSite 可以有下面三种值：

  • Strict 仅允许一方请求携带 Cookie，即浏览器将只发送相同站点请求的 Cookie，即当前网页 URL 与请求目标 URL 完全一致。
  • Lax 允许部分第三方请求携带 Cookie
  • None 无论是否跨站都会发送 Cookie

之前默认是 None 的，Chrome80 后默认是 Lax。

好文推荐：https://juejin.im/post/5e718ecc6fb9a07cda098c2d

session

session 是一种维持客户端与服务器端会话的机制。

但是与 cookie 把会话信息保存在客户端本地不一样，session 把会话保留在服务端。

许多 web应用中，session 机制就是通过 cookie 来实现的。当然还可以用其他方式来实现。

  1. cookie 是浏览器提供的一种缓存机制，它可以用于维持客户端与服务端之间的会话
  2. session 指的是维持客户端与服务端会话的一种机制，它可以通过 cookie 实现，也可以通过别的手段实现。
  3. 如果用 cookie 实现会话，那么会话会保存在客户端浏览器中
  4. session 机制提供的会话是保存在服务端的

（面试题目）在地址栏键入 URL 后，网络世界发生了什么？

关键词：访问 DNS 服务器、获取 IP 地址、三次握手建立 TCP 连接、本机发送 HTTP 请求、服务器响应并返回数据、浏览器渲染显示

首先我们要访问 DNS 服务器获得网站对应的 IP 地址

拿到网站的 IP 地址后就可以与该网站的服务器建立 TCP 连接（需要进行三次握手）

三次握手建立连接后，本机就可以向服务器发送 HTTP 请求

服务器接受到了请求会做出相应的响应，把请求的数据发送给本机浏览器，最终浏览器把服务器响应的数据渲染显示出来

（面试题目） Post 和 Get 的区别

  • Get 请求能缓存，Post 不能
  • Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。
  • Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术
  • URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的
  • Post 支持更多的编码类型且不对数据类型限制

其他方面参考：

https://juejin.im/post/5ddff9565188256eaf01dee4#heading-2

https://juejin.im/post/5872309261ff4b005c4580d4#heading-4

[高德一面]一个 tcp 连接能发几个 http 请求？

大佬原文地址戳我>>

如果是 HTTP 1.0 版本协议，一般情况下，不支持长连接，因此在每次请求发送完毕之后，TCP 连接即会断开，因此一个 TCP 发送一个 HTTP 请求。

但是有一种情况可以将一条 TCP 连接保持在活跃状态，那就是通过 Connection 和 Keep-Alive 首部，在请求头带上 Connection: Keep-Alive，并且可以通过 Keep-Alive 通用首部中指定的，用逗号分隔的选项调节 keep-alive 的行为，如果客户端和服务端都支持，那么其实也可以发送多条，不过此方式也有限制，可以关注《HTTP 权威指南》4.5.5 节对于 Keep-Alive 连接的限制和规则。

HTTP 1.1 版本协议，默认连接都是长连接（想断开则指定 Connection 为 close），因此只要 TCP 连接不断开，便可以一直发送 HTTP 请求，持续不断，没有上限；
同样，如果是 HTTP 2.0 版本协议，支持多用复用，一个 TCP 连接是可以并发多个 HTTP 请求的，同样也是支持长连接，因此只要不断开 TCP 的连接，HTTP 请求数也是可以没有上限地持续发送。

本文先整理这么多吧，反正一次也消化不完。

如果喜欢本文希望能点个赞～

当然可以关注我来获取后续文章

也可以关注我个人博客

还也可以关注我公众号「九零后重庆崽儿」。