前端面试知识点大全——HTTP协议篇（一）

总纲：前端面试知识点大全

目录

1.为什么传统上利用多个域名来提供网站资源会更有效

1.1 常规原因

1.2 非常规原因

1.3 具体细说

2.Long-Polling、Websockets 和 Server-Sent Event

2.1 AJAX Polling，普通轮询

2.2 AJAX Long-Polling

2.3 HTML5 Server Sent Events (SSE) / EventSource，不是http2.0中的服务器推送

2.4 HTML5 Websockets:

2.5 总结

3.常见的请求头和响应头

4.和缓存有关的HTTP首部字段

4.1 强制缓存：Expires（http 1.0）/Cache-Control（http1.1）

4.2 协商缓存

4.3 用户操作对缓存的影响

4.4 不能缓存的请求：

5.GET和POST请求的区别

5.1 用途

5.2 区别

5.3 在以下情况中，请使用 POST 请求：

5.4 补充（两者的区别）

6.HTTP method

7.HTTP状态码

8.https 加密过程

9.http2新特性

9.1 多路复用（一个域只需要一个TCP连接）

9.2 二进制分帧

9.3 头部压缩

9.4 服务端推送

10.http1.0与http1.1的主要区别

10.1 长连接（不会永久保持连接，而是保持一段时间，在不同服务器软件中可以设置）

10.2 节约带宽

10.3 host域

---

1.为什么传统上利用多个域名来提供网站资源会更有效

1.1 常规原因

1) CDN缓存更方便。

2) 突破浏览器并发限制。

3) Cookie减少, 节省带宽，尤其是上行带宽 一般比下行要慢。

1.2 非常规原因

1) 对于UGC的内容和主站隔离，防止不必要的安全问题。

正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。

2) 数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事. 这个可能被用的不多。

1.3 具体细说

1. 静态内容和动态内容分服务器存放，使用不同的服务器处理请求。处理动态内容的只处理动态内容，不处理别的，提高效率，这样使得CDN（内容分发网络）缓存更方便

2、 突破浏览器并发限制 (你随便挑一个 G家的 url: https://lh4.googleusercontent.com/- si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 把前面的 lh4换成 lh3,lh6 啥的，都照样能够访问，像地图之类的需要大量并发下载图片的站点，这个非常重要。)

3、跨域不会传cookie,节省宽带；举例说一下：

twitter 的主站 http://twitter.com ，用户的每次访问，都会带上自己的cookie ，挺大的。假如twitter 的图片放在主站域名下，那么用户每次访问图片时，request header 里就会带有自己的cookie ，header 里的cookie 还不能压缩，而图片是不需要知道用户的cookie 的，所以这部分带宽就白白浪费了。

写主站程序时，set-cookie 也不要set 到图片的域名上。

在小流量的网站，这个cookie 其实节省不了多少带宽，当流量如facebook twitter 时，节省下来就很可观了。

2.Long-Polling、Websockets 和 Server-Sent Event

2.1 AJAX Polling，普通轮询

1. 客户端使用普通的http方式向服务器端请求网页

2. 客户端执行网页中的JavaScript轮询脚本，定期循环的向服务器发送请求（例如每5秒发送一次请求），获取信息

3. 服务器对每次请求作出响应，并返回相应信息，就像正常的http请求一样

2.2 AJAX Long-Polling

1. 客户端使用普通的http方式向服务器端请求网页

2. 客户端执行网页中的JavaScript脚本，向服务器发送数据、请求信息

3. 服务器并不是立即就对客户端的请求作出响应，而是等待有效的更新

4. 当信息是有效的更新时，服务器才会把数据推送给客户端

5. 当客户端接收到服务器的通知时，立即会发送一个新的请求，进入到下一次的轮询

2.3 HTML5 Server Sent Events (SSE) / EventSource，不是http2.0中的服务器推送

原理：服务器向客户端声明，接下来要发送的是流信息（streaming），这样客户端以为发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来，所以不会关闭连接。

单向通道，只能服务器向客户端发送数据

1. 客户端使用普通的http方式向服务器端请求网页

2. 客户端执行网页中的JavaScript脚本，与服务器之间建立了一个连接

3. 当服务器端有有效的更新时，会发送一个事件到客户端

4. 服务器到客户端数据的实时推送，大多数内容是你需要的：

i. 你需要一台可以做Event Loop的服务器

ii. 不允许跨域的连接

iii. 如果你觉得这些还不够，想要了解更多，可以参考下面的文件和手册

2.4 HTML5 Websockets:

1. 客户端使用普通的http方式向服务器端请求网页（upgrade: websocket）
2. 客户端执行网页中的JavaScript脚本，与服务器之间建立了一个连接
3. 服务器和客户端之间，可以双向的发送有效数据到对方

• • 服务器可以实时的发送数据到客户端，同时客户端也可以实时的发送数据到服务器
  • 你需要一台可以做Event Loop的服务器
  • 使用 WebSockets 允许跨域的建立连接
  • 它同样支持第三方的websocket主机服务器，例如Pusher或者其它。这样你只需要关心客户端的实现 ，降低了开发难度。

2.5 总结

浏览器兼容性

Long-polling支持大多数当前的浏览器

Server-Sent Events支持Chrome9+、Firefox6+、Opera11+、Safari5+

Chrome14、Firefox7支持最新的hybi-10协议，Firefox6支持hybi-07.

服务器负载

Long-polling占一小部分CPU资源，但是创建空的进程将浪费系统的内存

Server-Sent Events工作的方式有很多，除非Server-Sent Events不必在每一次响应发出后都关闭连接。

WebSockets，服务器只需要一个进程处理所有的请求，没有循环，不必为每个客户端都分配cpu和内存。

客户端负载

Long-polling取决于实现方式，但终究是一个异步的方式

Server-Sent Events采用浏览器的内置的实现方式，只花费很少的一部分资源。

WebSockets跟Server-Sent Events一样，采用浏览器的内置的实现方式，只花费很少的一部分资源。

时间线

Long-polling接近实时，但是发送新的请求和发送相应会有一定的时延。

Server-Sent Events默认延时3秒，但是可以调整。

WebSockets真正的实时

实现方式复杂度

Long-polling实现起来非常简单

Server-Sent Events甚至比Long-polling更简单

需要一个WebSockets服务器处理事件，并开放一个端口

 

3.常见的请求头和响应头

可以学习菜鸟教程：http://www.runoob.com/http/http-header-fields.html

4.和缓存有关的HTTP首部字段

参考链接https://segmentfault.com/a/1190000010690320

4.1 强制缓存：Expires（http 1.0）/Cache-Control（http1.1）

1）Expires

Expires的值为服务端返回的到期时间，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。不过Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。Expires 的一个缺点就是，返回的到期时间是服务器端的时间，这样存在一个问题，比较的时间是客户端本地设置的时间，所以有可能会导致差错，所以在HTTP 1.1版开始，使用Cache-Control替代。

Expires: Thu, 01 Dec 1994 16:00:00 GMT （必须是GMT格式）

如果把它设置为-1，则表示立即过期

2）Cache-Control（优先级比expires高，会覆盖）

用于定义所有的缓存机制都必须遵循的缓存指示，这些指示是一些特定的指令，包括public、private、no-cache(表示可以存储，但在重新验正其有效性之前不能用于响应客户端请求)、no-store、max-age、s-maxage以及must-revalidate等；Cache-Control中设定的时间会覆盖Expires中指定的时间；

3）max-age和expires设置缓存时间的区别

max-age是HTTP/1.1中,他是指我们的web中的文件被用户访问(请求)后的存活时间,是个相对的值,相对Request_time(请求时间).

例如:A.html 用户请求时间是18:00,max-age设置的是600的话,相当18:00+600秒过期,也就是相对18:00的时间后面600秒后过期.默认的max-age是由Expires算出来的.

而expires是绝对时间，是基于服务器的时间作为标准。

4.2 协商缓存

1）Last-Modified/If-Modified-Since

Last-Modified：

服务器在响应请求时，告诉浏览器资源的最后修改时间。

If-Modified-Since：

再次请求服务器时，通过此字段通知服务器上次请求时，服务器返回的资源最后修改时间。

服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。

若资源的最后修改时间大于If-Modified-Since，说明资源又被改动过，则响应整片资源内容，返回状态码200；

若资源的最后修改时间小于或等于If-Modified-Since，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

2）Etag/If-None-Match（优先级高于Last-Modified/If-Modified-Since）

Etag：

服务器资源的唯一标识符, 浏览器可以根据ETag值缓存数据, 节省带宽. 如果资源已经改变, etag可以帮助防止同步更新资源的相互覆盖. ETag 优先级比 Last-Modified 高.

If-None-Match：

再次请求服务器时，通过此字段通知服务器客户段缓存数据的唯一标识。

服务器收到请求后发现有头If-None-Match 则与被请求资源的唯一标识进行比对，

不同，说明资源又被改动过，则响应整片资源内容，返回状态码200；

相同，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

4.3 用户操作对缓存的影响

4.4 不能缓存的请求：

1、不能被缓存的请求HTTP 信息头中包含Cache-Control:no-cache，pragma:no-cache，或Cache-Control:max-age=0 等告诉浏览器不用缓存的请求

2、需要根据Cookie，认证信息等决定输入内容的动态请求是不能被缓存的

3、经过HTTPS安全加密的请求（有人也经过测试发现，ie 其实在头部加入 Cache-Control：max-age 信息，firefox 在头部加入 Cache-Control:Public 之后，能够对HTTPS的资源进行缓存）

4、HTTP 响应头中不包含 Last-Modified/Etag，也不包含 Cache-Control/Expires 的请求无法被缓存

5、目前浏览器的实现是不会对POST请求的响应做缓存的（从语义上来说也不应该），并且规范中也规定了返回状态码不允许是304。不过这并不表示POST的响应不能被缓存，根据RFC 7231 - Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content中描述的，如果在POST请求对应的响应中包含Freshness相关信息的话，这次响应也是可以被缓存，具体可以参考上面的那个链接。

5.GET和POST请求的区别

5.1 用途

GET一般用于获取/查询资源信息

POST一般用于更新资源信息，向服务器传送数据

5.2 区别

1）传参方式

GET可以通过URL直接传参；

两者都可以通过body传参；

2）长度

1. header和body都没有对长度的限制；

2. URL的长度受到部分早期浏览器的限制；

3. URL的长度还可能受到服务器的限制，由于URL的实际超长或者设定其Content-Length较大值会引起服务器最大并发数下降或者资源空耗；

4. 2和3间接限定了URL方式发起GET方法的长度；

3） 安全性

1. GET不会修改服务端数据，POST可以修改数据

2. URL方式发起GET请求，参数会明文暴露

3. 使用GET提交数据还可能会造成Cross-site request forgery攻击

4. 本质上安全性无区别

5.3 在以下情况中，请使用 POST 请求：

1. 无法使用缓存文件（更新服务器上的文件或数据库）

2. 向服务器发送大量数据（POST 没有数据量限制）

3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

5.4 补充（两者的区别）

1、get参数通过url传递，post放在request body中。

2、get请求在url中传递的参数是有长度限制的（2k，根据浏览器的限制），而post没有。

3、get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。

4、get请求只能进行url编码，而post支持多种编码方式

5、get请求会浏览器主动cache，而post请求一般不做缓存。

6、get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。

7、GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

8、GET产生一个TCP数据包；POST产生两个TCP数据包。

9、对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。（这也是第8条的原因）

 

表单POST支持的传输编码格式（content-type），即enctype属性的值

1、applicaiton/x-www-form-urlencoded (默认)

以URL编码后的字符形式，例如：title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

2、multipart/form-data

表单提交常用

3、text/plain（不编码，title=test&sub=1）

6.HTTP method

OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送'*'的请求来测试服务器的功能性。

HEAD：向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应消息头中的元信息。

GET：向特定的资源发出请求。

POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的创建和/或已有资源的修改。

PUT：向指定资源位置上传其最新内容。

DELETE：请求服务器删除Request-URI所标识的资源。

TRACE：回显服务器收到的请求，主要用于测试或诊断。 追踪路径

CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。

7.HTTP状态码

参考我的个人博客：https://blog.csdn.net/sinat_36521655/article/details/79562358

8.https 加密过程

https是在http基础上添加了一层ssl（安全套接字层）或者tls（传输层安全协议），在TCP于http之间。HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。

1. 客户端发起HTTPS请求

2. 服务端的配置

采用HTTPS协议的服务器必须要有一套数字证书，可以是自己制作或者CA证书。区别就是自己颁发的证书需要客户端验证通过，才可以继续访问，而使用CA证书则不会弹出提示页面。这套证书其实就是一对公钥和私钥。公钥给别人加密使用，私钥给自己解密使用。

3. 传送证书（公钥）

这个证书其实就是公钥，只是包含了很多信息，如证书的颁发机构，过期时间等。

4. 客户端解析证书

这部分工作是由客户端的TLS来完成的，首先会验证公钥是否有效，比如颁发机构，过期时间等，如果发现异常，则会弹出一个警告框，提示证书存在问题。如果证书没有问题，那么就生成一个随即值，然后用证书对该随机值进行加密。

5. 传送加密信息

这部分传送的是用证书加密后的随机值，目的就是让服务端得到这个随机值，以后客户端和服务端的通信就可以通过这个随机值来进行加密解密了。

6. 服务段解密信息

服务端用私钥解密后，得到了客户端传过来的随机值(私钥)，然后把内容通过该值进行对称加密。所谓对称加密就是，将信息和私钥通过某种算法混合在一起，这样除非知道私钥，不然无法获取内容，而正好客户端和服务端都知道这个私钥，所以只要加密算法够彪悍，私钥够复杂，数据就够安全。

7. 传输加密后的信息

这部分信息是服务段用私钥加密后的信息，可以在客户端被还原。

8. 客户端解密信息

客户端用之前生成的私钥解密服务段传过来的信息，于是获取了解密后的内容。

PS: 整个握手过程第三方即使监听到了数据，也束手无策。

9.http2新特性

9.1 多路复用（一个域只需要一个TCP连接）

同一个连接并发处理多个请求，而且并发请求数量比HTTP1.1大了好几个量级。

9.2 二进制分帧

在应用层和传输层之间增加二进制分帧层，自动将header和body部分区分开。在不改变http 1.x的语义、语法、状态码等的情况下，改进传输性能

9.3 头部压缩

http2考虑头部信息又是变化并不频繁，所以在server端做一个缓存，这就是HPACK压缩方式

（1）传输的value会经过哈夫曼编码来节省资源

（2）为了server和client同步，两边都需要保留一份Header List，并且每次发送请求时，都会检查更新。（所以第一次发送的内容为header list）

9.4 服务端推送

服务器对客户端的一个请求发送多个响应

当客户端向服务器请求数据时，服务器会顺便把一些客户端需要的资源一起推送到客户端，免得客户端再次创建连接发起请求到服务器请求。非常适合加载静态资源

服务器推送可以缓存，并且在遵循同源的情况下，不同页面之间可以共享缓存

10.http1.0与http1.1的主要区别

10.1 长连接（不会永久保持连接，而是保持一段时间，在不同服务器软件中可以设置）

http1.0不支持长连接，默认connection:close，服务器响应请求后立马关闭连接。而http1.1默认支持长连接，即connection：keep-alive。服务器也可以在响应头中发送：Keep-Alive：timeout，让浏览器发起关闭请求。（可以减少较多的TCP建立和关闭的操作，但可能server扛不住）

http的长连接（）是为了让tcp活得更久一点，以便在同一个连接上传送多个http，提高socket的效率。而tcp keep-alive是TCP的一种检测TCP连接状况的保鲜机制，会发送检测包判断TCP连接是否还存在。

keepalive是TCP保鲜定时器，当网络两端建立了TCP连接之后，闲置idle（双方没有任何数据流发送往来）了tcp_keepalive_time后，服务器内核就会尝试向客户端发送侦测包，来判断TCP连接状况(有可能客户端崩溃、强制关闭了应用、主机不可达等等)。如果没有收到对方的回答(ack包)，则会在 tcp_keepalive_intvl后再次尝试发送侦测包，直到收到对对方的ack,如果一直没有收到对方的ack,一共会尝试 tcp_keepalive_probes次，每次的间隔时间在这里分别是15s, 30s, 45s, 60s, 75s。如果尝试tcp_keepalive_probes,依然没有收到对方的ack包，则会丢弃该TCP连接。TCP连接默认闲置时间是2小时，一般设置为30分钟足够了。

10.2 节约带宽

a）、http1.1支持只发送header信息（不带任何body信息，HEAD方法），如果服务器认为客户端有权限访问服务器，则返回100（继续continue），否则返回401（未授权，需认证）。客户端收到100才开始把请求body发送至服务器

b）、http1.1支持传送内容的一部分，这样当客户端已经有一部分的资源后，只需向服务器请求另外的部分资源。（这是支持文件断点续传的基础，range字段）

10.3 host域

用于一个服务器为多个站点提供服务，利用host判断。

现在可以用web server（例如apache tomcat）设置虚拟站点，共享同一个ip和端口。

http1.0没有host与，http1.1才支持这个参数