备战面试/笔试 —— 前端程序员不可不知的HTTP知识

时间 2019-11-10

原文原文链接

这篇文章历时两天，内容依据于前端面试官常问的一些面试题
不足之处还望见谅
若是您以为对您有帮助的话，还望不要吝啬您的赞哟^_^

1.HTTP/TCP/IP/port 概览

老规矩，先从一个故事开始

龚先生穿越到了异界，发现这个异界很奇怪，只能用飞鸽传信并且还有几个规定【协议】
首先，有一个内容规定，规定每封信只能有四行字【这就是HTTP，至于具体哪四行，待会儿咱们说】，但具体信是怎么传输过去的，HTTP无论
因此又定一个传输规定，必需要用鸽子来送信，并且还必需要把信绑到鸽子的脚上【这个传输规定就是TCP】
可是，鸽子在天空中飞，来来回回得有个目的地吧，咱们还须要一个飞行目的地规定给鸽子分配目的地【这就是IP】
但问题又来了，你给别人飞鸽传信，那我的发展起来了，搞了一个有n个部门大公司，每一个部门都有本身独特的服务，但如今ip对应的是人家公司地址，你想把信传到人家公司的XX部门，要求具体的服务，咋办呢
这个时候，人家公司就把每一个部门都设置了不重复的编号，方便鸽子判断【不一样的编号就是port】css

听了这个故事，你对下面的图应该会容易理解了html

总结一下

HTTP —— 规定如何书写内容
TCP —— 规定如何传输
IP —— 规定如何链接
Port —— 对应IP的不一样服务

2.HTTP详解

2.1 HTTP的工做模型

HTTP的工做模型是请求/响应模型
你能够理解为
客户端【浏览器，Client】向服务器【Server】发送一个请求
服务器【Server】向客户端【浏览器，Client】返回一个响应前端

2.2 咱们来看一下HTTP的工做流程

第一步：浏览器与服务器创建链接，请求服务器资源

第二步：发送HTTP请求

浏览器向服务器发送一个文本形式的请求报文，共有四个部分【就是咱们在故事里说的每封信有四行字】
格式以下web

1.请求行【一行】【三个部分】
GET /a HTTP/1.1
POST /a HTTP/1.1
请求方式 请求路径 协议与版本号
2.请求头【多行】
Key:Value
关于userAgent：每个浏览器都是用户的代理者，用户经过浏览器来上网
3.空行【回车】
目的是要和第四部分隔开
4.请求体【message body】【任何字符串，但要符合content-Type】
username=blues&password=123

注：get请求通常省略3和4

GET方式实例以下【请求百度首页】面试

// 1.请求行【一行】【三个部分】
GET / HTTP/1.1
// 2.请求头【多行】
Host: www.baidu.com
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

// GET请求能够不写第三部分和第四部分

第三步：服务器接受请求及其附带参数并根据自身逻辑返回响应

1.响应行
HTTP/1.1 200(status code) OK(status message)
HTTP/1.1 404(status code) Not Found(status message)
2.响应头
key:value
关于Content-Type：响应文本的类型，编码方式
关于Date：格林美治时间 —— GMT
3.空行
4.响应体
任何字符串

第四步：浏览器解析响应体内容

2.3 HTTP请求的常见方式

2.3.1 GET方式

用于请求服务器发送某个资源算法

如何发一个GET请求
// 2.1 <link rel="stylesheet" href="style.css">
// 2.2 <img src="1.png">
// 2.3 <script src=".router.js">
// 2.4 地址栏输入URL，回车

2.3.2 POST方式

用于向服务器发送数据
好比，表单提交json

2.3.3 HEAD方式

和GET相似，不过服务器只会响应一些信息，而不会响应具体的内容
主要用于测试数组

2.3.4 PUT方式

和POST相似，不过是向服务器写入数据浏览器

2.3.5 GET 和 POST 的区别

参数GET的参数写在请求头中，POST写在请求体中
安全POST比GET安全
参数长度限制GET的长度限制在1024个字节，POST的长度限制在4~10Mb
功能区别2.3.1和2.3.2写了

2.4 HTTP的状态码

共有五大类

1xx：指示信息 —— 用于指定客户端某些响应的动做
2xx：成功 —— 表示请求已被成功接
3xx：重定向 —— 要完成请求必须进行更进一步的操做
4xx：客户端错误 —— 指出客户端错误
5xx：服务器端错误 —— 指出服务器端错误缓存

常见状态码

200	OK	请求成功	通常用于GET与POST请求
301	Moved Permanently	永久重定向	请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。从此任何新的请求都应使用新的URI代替
302	Found	临时移动	与301相似。但资源只是临时被移动。客户端应继续使用原有URI
403	Forbidden	被拒绝	服务器理解请求客户端的请求，可是拒绝执行此请求
404	Not Found	未找到	服务器没法根据客户端的请求找到资源（网页）。经过此代码，网站设计人员可设置"您所请求的资源没法找到"的个性页面

3.URL的组成形式

协议类型://<主机名>.<域名>:<端口编号>/<路径>/<文件名>?<查询字符串>#<哈希>

协议类型：对于web来讲，最多见的有http和https
<主机名>.<域名>：能够是IP地址或者域名
<端口编号>：就是port，方便找到对应的服务
/<路径>/<文件名>：资源存放的目录和资源名
?<查询字符串>：GET请求最经常使用的参数传递方式，如?username=blues&age=16
<哈希>：如今被不少MVVM框架用做了路由功能

4.HTTP缓存

4.1 Cache-control

在server能够进行响应头部设置

respond.setHeader("Cache-control","max-age=300");

Cache-control:max-age={有效时间}
有效时间内，会直接使用本地缓存
超过有效期，则从服务器拉取数据

4.2 ETag

由Http1.1推出
服务器会经过某种算法，给资源计算得出一个惟一标志符（好比md5标志）
在把资源响应给客户端的时候，会在响应头加上“ETag: 惟一标识符”一块儿返回给客户端

客户端会保留该 ETag 字段，并在下一次请求时将其一并带过去给服务器
服务器只须要比较客户端传来的ETag跟本身服务器上该资源的ETag是否一致，就能很好地判断资源相对客户端而言是否被修改过了

客户端是如何把标记在资源上的 ETag 传回给服务器的呢？

请求报文中有两个首部字段【请求头内的字段】能够带上 ETag 值：

⑴ If-None-Match: ETag-value
示例为 If-None-Match: "5d8c72a5edda8d6a:3239" 
告诉服务端若是 ETag 没匹配上须要重发资源数据，
若匹配上了则直接回送304 和响应报头便可。

⑵ If-Match: ETag-value
告诉服务器若是没有匹配到ETag，或者收到了“*”值而当前并无该资源实体
则应当返回412(Precondition Failed) 状态码给客户端
若匹配上了则服务器直接忽略该字段。

4.3 Cache-control 和 ETag的区别

类型	优点	劣势
Cache-Control	一、HTTP 1.1 产物，以时间间隔标识失效时间。二、比Expires多了不少选项设置。	一、HTTP 1.1 才有的内容，不适用于HTTP 1.0 。二、存在版本问题，到期以前的修改客户端是不可知的。
ETag	一、能够更加精确的判断资源是否被修改，能够识别一秒内屡次修改的状况。二、不存在版本问题，每次请求都回去服务器进行校验。	一、计算ETag值须要性能损耗。二、分布式服务器存储的状况下，计算ETag的算法若是不同，会致使浏览器从一台服务器上得到页面内容后到另一台服务器上进行验证时发现ETag不匹配的状况。

5.题外话：浏览器本地储存

5.1 Cookie

1.Cookie会被浏览器储存下来，只能由用户清除
2.Cookie是server发给browser的一串字符
3.根据Cookie记录的域名，浏览器在下次请求该域名时，browser必须带上Cookie【也就是说Cookie也会跟着请求被发送，若是Cookie过大，会浪费带宽】
4.Cookie的主要做用就是用来识别用户身份【判断该用户以前是否已经访问过】，而非储存数据
5.Cookie通常在Server端被设置
6.Cookie的大小通常在4k如下

5.2 LocalStorage

在上一节中，咱们提到了Cookie不该该用来储存数据
那么用户的偏好数据好比搜索记录等数据应该存放在哪里呢——LocalStorage

1.LocalStorage是window下的一个API

// 使用setItem设置
let searchHistory = ['吉他','前端']
window.localStorage.setItem('搜索记录',searchHistory)
// 请自行测试并自行查看

2.LocalStorage大小通常在5Mb左右
3.LocalStorage只能存储字符串，即使你储存的是一个数组，也会被转化为字符串

window.localStorage.getItem('搜索记录') // "吉他,前端"
// 解决方案 —— 使用JSON.stringnify将数组 字符串化
let jsonArr = JSON.stringify(searchHistory)
console.log(jsonArr) // "["吉他","前端"]"
window.localStorage.setItem('搜索记录',jsonArr)
JSON.parse(window.localStorage.getItem('搜索记录')) // ["吉他", "前端"]