2024年最全web前端之浏览器篇——http协议知识汇总(3)，2024年最新2024前端开发社招面试解答之性能优化-CSDN博客

本文链接：https://blog.csdn.net/2401_84446787/article/details/138850778

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

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的可选值有

作为响应首部时，cache-directive 的可选值有：

实际重点关注五个值private、public、no-cache、max-age，no-store，默认为private

private:客户端可以缓存

public:客户端和代理服务器都可缓存（前端的同学，可以认为public和private是一样的）

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

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

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

举个例子：

图中Cache-Control仅指定了max-age，所以默认为private，缓存时间为31536000秒（365天）

也就是说，在365天内再次请求这条数据，都会直接获取缓存数据库中的数据，直接使用

9.3.2 对比缓存

对比缓存：即需要进行比较判断是否可以使用缓存。浏览器第一次请求数据时，服务器会将缓存标识与数据一起返回给客户端，客户端将二者备份至缓存数据库中。再次请求数据时，客户端将备份的缓存标识发送给服务器，服务器根据缓存标识进行判断，判断成功后，返回304状态码，通知客户端比较成功，可以使用缓存数据

对比缓存解决的问题：缓存时间过期，但是服务器却没有更新这个资源，此时客户端再次请求服务器把这个资源重新发过来的话，很浪费带宽和时间。对比缓存就是让服务器知道客户端现在存有的缓存文件，其实跟自己所有的文件是一致的，让客户端直接使用自己缓存的即可，提高了缓存的复用率

对比缓存是根据请求头部和响应头部的缓存标识进行判断的

对比缓存使用的缓存标识字段

Last-Modified / If-Modified-Since

Last-Modified：

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

If-Modified-Since：

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

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

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

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

Last-Modified 说好却也不是特别好，因为如果在服务器上，一个资源被修改了，但其实际内容根本没发生改变，会因为Last-Modified时间匹配不上而返回了整个实体给客户端（即使客户端缓存里有个一模一样的资源）__

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

为了解决上述Last-Modified可能存在的不准确的问题，Http1.1还推出了 ETag 实体首部字段。

Etag可以理解成一个服务器用加密算法计算出来的唯一标识符，用来标识一个资源的，在客户端第一次请求的时候服务器会随着数据一起传给客户端，客户端会保留该 ETag 字段，并在下一次请求时将其一并带过去给服务器。服务器只需要比较客户端传来的ETag跟自己服务器上该资源的ETag是否一致，就能很好地判断资源相对客户端而言是否被修改过了

Etag：

服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。