2024年最全web前端之浏览器篇——http协议知识汇总(2)，面试总结-CSDN博客

本文链接：https://blog.csdn.net/2401_84446712/article/details/138850748

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。

一介绍

========

介绍不多说，HTTP是Hyper Text Transfer Protocol（超文本协议），是一个基于TCP/IP的应用层协议，主要用于从web服务器传输超文本到本地的浏览器的一个传输协议，由请求和响应构成，是一个标准的客户端服务器模型。

这里简要的介绍下http和https的区别：https协议是一个承载在SSL+TLS上，基于http和ssl构建的，其与http最大的区别就是其的安全性，而且其使用的是不一样的连接方式，用的端口也不一样（443，http是80），另外由于其确保安全性，那么https就需要进行与服务器的还密钥和确认加密算法的需要，这样的话跟服务器进行握手的次数就增多，影响性能且繁琐。

二 http的主要特点

===============

1 支持客户端/服务器模式

2 简单快速：客户端向服务器请求服务的适合，只需要传输方法和路径。请求的常用方法有GET、HEAD、POST。由于每一种http协议都简单，使得http服务器的程序规模小，则通信速度很快

3 灵活：http允许传输任意类型的数据对象，正在传输的类型由请求头部的Content-Type加以标注

4 HTTP 0.9和1.0使用非持续连接：限制每次连接只处理一个请求，服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。HTTP 1.1使用持续连接：不必为每个web对象创建一个新的连接，一个连接可以传送多个对象（这个关联到头部信息的Connection进行控制）

5 http是无状态协议。无状态指的是对于事物处理没有记忆能力，缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。

（无状态协议：协议的状态是指下一次传输可以“记住”这次传输信息的能力。http不会为了下一次连接维护这次连接所传输的信息的，为了保证服务器的内存。

举例：比如客户获得一张网页之后关闭浏览器，然后再一次启动浏览器，再登陆该网站，但是服务器并不知道客户关闭了一次浏览器。由于Web服务器要面对很多浏览器的并发访问，为了提高Web服务器对并发访问的处理能力，在设计HTTP协议时规定Web服务器发送HTTP应答报文和文档时，不保存发出请求的Web浏览器进程的任何状态信息。这有可能出现一个浏览器在短短几秒之内两次访问同一对象时，服务器进程不会因为已经给它发过应答报文而不接受第二期服务请求。由于Web服务器不保存发送请求的Web浏览器进程的任何信息，因此HTTP协议属于无状态协议（Stateless Protocol）

）

HTTP协议是无状态的和Connection: keep-alive的区别：

HTTP是一个无状态的面向连接的协议，无状态不代表HTTP不能保持TCP连接，更不能代表HTTP使用的是UDP协议（无连接）。

从HTTP/1.1起，默认都开启了Keep-Alive，保持连接特性，简单地说，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。

Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。

1.1 版还引入了管道机制（pipelining），即在同一个TCP连接里面，客户端可以同时发送多个请求。这样就进一步改进了HTTP协议的效率。

举例来说，客户端需要请求两个资源。以前的做法是，在同一个TCP连接里面，先发送A请求，然后等待服务器做出回应，收到后再发出B请求。管道机制则是允许浏览器同时发出A请求和B请求，但是服务器还是按照顺序，先回应A请求，完成后再回应B请求。

三工作流程

==========

一次http操作称之为一次事物，工作过程可分为四步：

1）首先客户机与服务器需要建立连接。只要点击某个超链接，HTTP工作开始（建立连接）

2）之后，客户机发送请求给服务器，请求方式的格式为：统一资源标识符（URL）、协议版本号、后边是MIME信息包括请求修饰符、客户机信息和可能的内容。（发送请求）

3）服务器接收到请求之后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本号、后边是MIME信息包括请求修饰符、客户机信息和可能的内容。（响应请求）

4）客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上，然后客户机与服务器断开连接（断开连接）

上述过程有可能是客户机经过了代理服务器才到达的web服务器的

由于HTTP是基于传输层的TCP/IP协议的，TCP是一个端到端的面向连接的协议。所谓的端到端可以理解为进程到进程之间的通信，故HTTP在开始传输之前需建立TCP连接，TCP连接的过程需要所谓的“三次握手”，如图。连接之后就可以进行传输了，HTTP在传输完成之间不会断开TCP连接，在HTTP1.1中（通过Connection头设置）这是默认的行为

四 URL详解

===============

URL：统一资源定位符，是URI（统一资源标识符）的一种，用于描述一个网络上的资源，基本格式如下：schema://host[:port#]/path/…/[;url-params][?query-string][#anchor]

scheme 指定低层使用的协议(例如：http, https, ftp)

host HTTP服务器的IP地址或者域名

“：”后的是端口，默认是80

path：是访问资源的路径

“；”后面的是url-params：URL参数，可以用作一个缓存的标识（session id）

query-string：发送给http服务器的数据，也可以说是查询参数，用&符号分隔

“#”后面的是锚

五请求消息

==========

5.1 请求的消息格式如下：

1）请求行，如GET /images/logo.gif HTTP/1.1，表示从/images目录下请求logo.gif这个文件，使用的是get方法，协议版本是http1.1

2）请求头，如Accept-Language: en

3）空行

4）可选的消息体

请求行和标题必须以回车换行作为结尾，空行中必定只有回车换行

5.2 请求方法

前面三个是http0.9和http1.0协议就已经有的，后面五个是http1.1之后加的

GET：向特定的资源发送请求

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

HEAD：向服务器索要与GET请求相一致的响应，但是响应体不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应消息头中的元信息。该方法常用于测试超链接的有效性，是否可以访问，以及最近是否更新（那么主要用于响应头信息的获取）

PUT：向制定资源位置上传其最新的内容

OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法。

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

TRACE：回显服务器收到的请求，用于测试或诊断

CONNECT：http1.1协议种预留给能够将连接改为管道方式的代理服务器

PATCH：用来将局部修改应用于某一资源，添加于规范RFC5789。

总结就是：GET方法用于在服务器中获取数据，POST方法是在服务器中修改资源数据，PUT是用于上传数据，DELETE是在服务器中删除资源，HEAD是获取响应头信息

GET和POST的区别：

1）提交的数据位置不同，GET是在URL之后，而POST是在HTTP包的body中

2）GET提交的数据大小有限制，最多有1024字节，主要是浏览器对URL的长度有限制，POST提交的数据没有限制

3）POST较GET安全，因为GET会将一些信息暴露在URL上，对于提交的数据都会显示在URL上，若页面可以缓存或者其他人可以访问，则可从历史记录获取这个用户账号密码什么的资料

4）GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值。

六响应消息

==========

客户端向服务器发送一个请求，服务器以一个状态行作为响应，响应的内容包括：消息协议的版本、成功或者错误编码、服务器信息、实体元信息以及必要的实体内容。根据响应类别的类别，服务器响应里可以含实体内容，但不是所有的响应都有实体内容。

格式：

http协议版本空格状态码空格 Reason-Phrase 回车换行（Reason-Phrase是个简单的文本描述），如

七 http的状态响应码

================

1XX（信息类）：表示接收到请求并继续处理

2XX（响应成功）：表示动作被成功接收，理解和接收

关注200：表明该请求被成功地完成，所请求的资源发送回客户端

3XX（重定向）：为了完成指定的动作，必须接受进一步处理

关注304：自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用

4XX（客户端错误类）：请求包含错误语法或不能正确执行

关注404：一个404错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在。eg：输入了错误的URL

5XX（服务器端错误类）：服务器不能正确执行一个正确的请求

八头部信息

==========

8.1 HTTP常见的请求头

If-Modified-Since：把浏览器端缓存页面的最后修改时间发送到服务器去，服务器会把这个时间与服务器上实际文件的最后修改时间进行对比。如果时间一致，那么返回304，客户端就直接使用本地缓存文件。如果时间不一致，就会返回200和新的文件内容。客户端接到之后，会丢弃旧文件，把新文件缓存起来，并显示在浏览器中。（这与对比缓存有关，后文会讲到，相对的是响应头的Last-Modified）

If-None-Match：If-None-Match和ETag一起工作，工作原理是在HTTP响应头中添加ETag信息。当用户再次请求该资源时，将在HTTP请求头中加入If-None-Match信息(ETag的值)。如果服务器验证资源的ETag没有改变（该资源没有更新），将返回一个304状态告诉客户端使用本地缓存文件。否则将返回200状态和新的资源和Etag（这也与对比缓存有关，且优先级高于上面的If-Modified-Since/Last-Modified对）

Cache-Control：指定请求和响应遵循的缓存机制。缓存指令是单向的（响应中出现的缓存指令在请求中未必会出现），且是独立的（在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程）。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age、s-maxage。（请求头和响应头中都有，关于强制缓存的）

Cache-Control:Public 客户端和服务器都可缓存

Cache-Control:Private 客户端可缓存

Cache-Control:no-cache 需要使用对比缓存来验证缓存数据

Cache-Control:no-store 所有内容都不会缓存，强制缓存，对比缓存都不会触发

Cache-Control:max-age 缓存的内容将在 xxx 秒后失效。

Cache-Control:min-fresh 指示客户机可以接收响应时间小于当前时间加上指定时间的响应。

Cache-Control:max-stale 指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

Accept：浏览器端可以接受的MIME类型。例如：Accept: text/html 代表浏览器可以接受服务器回发的类型为 text/html 也就是我们常说的html文档

Accept-Encoding：浏览器申明自己可接收的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法（gzip，deflate）

Accept-Language：浏览器申明自己接收的语言。语言跟字符集的区别：中文是语言，中文有多种字符集，比如big5，gb2312，gbk等等

Accept-Charset：浏览器可接受的字符集

User-Agent：告诉HTTP服务器，客户端使用的操作系统和浏览器的名称和版本

Content-Type：例如：Content-Type: application/x-www-form-urlencoded。

Connection：例如：

Connection: keep-alive 当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。HTTP 1.1默认进行持久连接。利用持久连接的优点，当页面包含多个元素时（例如Applet，图片），显著地减少下载所需要的时间。要实现这一点，Servlet需要在应答中发送一个Content-Length头，最简单的实现方法是：先把内容写入ByteArrayOutputStream，然后在正式写出内容之前计算它的大小。

Connection: close 代表一个Request完成后，客户端和服务器之间用于传输HTTP数据的TCP连接会关闭，当客户端再次发送Request，需要重新建立TCP连接。

Referer：包含一个URL，用户从该URL代表的页面出发访问当前请求的页面

Host：（发送请求时，该头域是必需的）主要用于指定被请求资源的Internet主机和端口号，它通常从HTTP URL中提取出来的（http1.1协议种必须包含）

例如: 我们在浏览器中输入：http://www.guet.edu.cn/index.html，浏览器发送的请求消息中，就会包含Host请求头域：Host：http://www.guet.edu.cn，此处使用缺省端口号80，若指定了端口号，则变成：Host：指定端口号

Cookie：最重要的请求头之一, 将cookie的值发送给HTTP服务器

Content-Length：表示请求消息正文的长度

Authorization：授权信息

8.2 HTTP常见的响应头

Allow：服务器支持哪些请求方法（如GET、POST等）

Date：表示消息发送的时间，时间的描述格式由rfc822定义。

Expires：指明应该在什么时候认为文档已经过期，从而不再缓存它，重新从服务器获取，会更新缓存

P3P：用于跨域设置Cookie, 这样可以解决iframe跨域访问cookie的问题

Set-Cookie：非常重要的header, 用于把cookie发送到客户端浏览器，每一个写入cookie都会生成一个Set-Cookie。

例如: Set-Cookie: sc=4c31523a; path=/; domain=.acookie.taobao.com

ETag：和If-None-Match 配合使用。

Last-Modified：用于指示资源的最后修改日期和时间。Last-Modified也可用setDateHeader方法来设置。

Content-Type：WEB服务器告诉浏览器自己响应的对象的类型和字符集，

例如：Content-Type: text/html;charset=utf-8

Content-Length：指明实体正文的长度，以字节方式存储的十进制数字来表示

Content-Encoding：WEB服务器表明自己使用了什么压缩方法（gzip，deflate）压缩响应中的对象

Content-Range：用于指定整个实体中的一部分的插入位置，他也指示了整个实体的长度

Content-Language：WEB服务器告诉浏览器自己响应的对象所用的自然语言

Connection：

例如：Connection: keep-alive 当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。

Connection: close 代表一个Request完成后，客户端和服务器之间用于传输HTTP数据的TCP连接会关闭，当客户端再次发送Request，需要重新建立TCP连接。

Location：用于重定向一个新的位置，包含新的URL地址

Refresh：表示浏览器应该在多少时间之后刷新文档，以秒计

摘抄于：http://www.cnblogs.com/EricaMIN1987_IT/p/3837436.html

九 HTTP缓存机制

==============

WEB缓存(cache)位于Web服务器和客户端之间。

缓存会根据请求保存输出内容的副本，例如html页面，图片，文件，当下一个请求来到的时候：如果是相同的URL，缓存直接使用副本响应访问请求，而不是向源服务器再次发送请求。

HTTP协议定义了相关的消息头来使WEB缓存尽可能好的工作

9.1 缓存的优点

减少相应延迟：因为请求从缓存服务器（离客户端更近）而不是源服务器被相应，这个过程耗时更少，让web服务器看上去相应更快。

减少网络带宽消耗：当副本被重用时会减低客户端的带宽消耗；客户可以节省带宽费用，控制带宽的需求的增长并更易于管理。

9.2 http报文中跟缓存有关的头部字段

为了对以下能用到的一些头部信息能有个大致了解，介绍以下与缓存有关的头部字段

1. 通用首部字段（就是请求报文和响应报文都能用上的字段）

2. 请求首部字段

3. 响应首部字段

4. 实体首部字段

9.3 缓存方式

缓存实际上就是根据一些策略规则来决定是否使用浏览器中的一些存储的信息，这个缓存信息可以认为是浏览器中有存在的一个缓存数据库（也可以称为本地缓存）

根据是否需要重新向服务器发起请求来分类，可分为两大类（强制缓存、对比缓存）

强制类型不需要向服务器发起请求，对比缓存需要向服务器发起请求

9.3.1 强制缓存

已经具有缓存数据的时候，并且缓存时间未过期的话，使用强制缓存

http1.0的强制缓存是有两个字段来进行，Pragma（表示禁用缓存）和Expires（启用缓存和定义缓存时间）。同时使用的话，Pragma优先级会较高，但是响应报文中Expires所定义的缓存时间是相对服务器上的时间而言的，如果客户端上的时间跟服务器上的时间不一致_（特别是用户修改了自己电脑的系统时间）_，那缓存时间可能就没啥意义了，为了解决这个问题，http1.1使用的是新字段：Cache-Control（重点掌握，以此为基准）

注意：为了做http协议的向下兼容，你还是可以看到很多网站依旧会带上这两个字段，实际上是可抛弃的两个字段了

Cache-Control

使用方法： “Cache-Control”:“cache-directive”

作为请求头部的时候，cache-directive的可选值有