「offer来了」浏览器原理被问懵？5大知识板块巩固你的http知识体系（3.6w字）

Posted 2021-12-08 星期一研究室

「面试专栏」前端面试之浏览器原理篇

• 🏔️序言
• 🌄一、http和https协议
• （一）http和https之间的关系🧭
• • 1、http和https是什么？
  • 2、http和https的区别
• （二）http协议🧭
• • 1、http1.0、http1.1、http2.0协议的基本内容
  • • （1）http1.0
    • （2）http1.1
    • （3）http2.0
  • 2、http1.0、http1.1、http2.0协议之间的区别
  • • （1）http1.0和http1.1主要区别
    • （2）http1.1和http2.0主要区别
  • 3、http2.0
  • • （1）http2.0项目设定目标
    • （2）http2.0特性
  • 4、说下http缓存吧（浏览器缓存）
  • • （1）什么是缓存？又有什么用？
    • （2）你知道有哪些缓存方式吗？
    • （3）缓存位置
    • （4）http的缓存是怎么生效的
  • 5、http常见的头部字段
  • • （1）General通用首部
    • （2）Response响应首部
    • （3）Request请求首部
    • （4）Cookie
  • 6、http状态码
  • 7、http的请求方式场景
  • • （1）http请求方式
    • （2）GET和HEAD的区别
    • （3）GET和POST的区别
    • （4）为什么跨域的复杂请求需要预检？
  • 8、http请求过程
  • • （1）问题集锦
    • （2）问题解答
    • （3）补充
  • 9、http的渲染步骤
• （三）https协议🧭
• • 1、https的优缺点
  • • （1）优点
    • （2）缺点
  • 2、https的访问过程
  • • 问题集锦：
    • 简略解释：
    • 详细解释：
  • 3、https为什么是安全的
  • 4、https如何进行性能优化？
  • • （1）https访问速度优化
    • （2）https计算性能优化
• 🏖️二、浏览器存储
• • 1、浏览器存储的方式
  • 2、cookie、localStorage和sessionStorage
  • • （1）cookie、localStorage和sessionStorage是什么？
    • （2）cookie、localStorage和sessionStorage的异同点
  • 3、cookie的用途
  • • （1）保存用户登录状态
    • （2）跟踪用户行为
  • 4、session和token
  • • （1）Session
    • （2）Token
• 🏜️三、跨域
• • 1、什么是同源策略？
  • 2、为什么浏览器会有同源策略？
  • 3、同源策略限制内容有哪些？
  • 4、跨域问题解决方案
  • • （1）通过jsonp跨域
    • （2）通过修改document.damain来进行跨域（主域相同）
    • （3）使用window.name来进行跨域
    • （4）使用HTML5新引进的window.postMessage方法
    • （5）cors
    • （6）动态创建script
    • （7）利用location.hash 跨域
    • （8）websocket
    • （9）nginx的反向代理
• ⛺四、前端安全
• • 1、跨站脚本攻击XSS
  • • （1）XSS是什么
    • （2）XSS的攻击类型
    • （3）如何防御XSS
  • 2、跨站请求伪造csrf
  • • （1）什么是csrf
    • （2）csrf攻击流程
    • （3）CSRF的特点
    • （4）CSRF攻击场景
    • （5）CSRF常见的攻击类型
    • （6）如何防御csrf
    • （7）CSRF与 XSS 区别
• 🏞️五、其他问题
• • 1、Chrome浏览器用过哪些调试工具
  • 2、浏览器内核的理解
• 🏡六、结束语
• 🐣彩蛋 One More Thing
• • 🏷️pdf内容获取
  • 🏷️更新地址
  • 🏷️番外篇

🏔️序言

大家都知道，浏览器原理对于前端面试来说是一个久经不衰的话题。因为浏览器所设计到的内容真的是非常非常的广。小到一个简单的 http 知识，大到跨域问题，前端安全问题等等都涉及到前端安全相关。所以，自然而然地，也是面试中一个非常重要地考点之一。

在下面的这篇文章中，将讲解关于我在准备面试过程中遇到的所有浏览器相关的问题，并将进行系统的归纳和总结。一起来开启你的 http 学习旅途⑧~

🌄一、http和https协议

（一）http和https之间的关系🧭

1、http和https是什么？

HTTP：(HyperText Transfer Protocol)超文本传输协议

HTTPS：(Hypertext Transfer Protocol Secure)超文本传输安全协议

2、http和https的区别

	http	https
名称	超文本传输协议	超文本传输安全协议
默认端口	80	443
发送方式	明文发送	加密传输
安全性	安全性相对差：容易被监听、被伪装、被篡改	安全性相对较好：防止监听、防止伪装、防止篡改
响应速度	响应快（3个包）	响应慢（12个包）tcp 3个 ssl 9个
成本	较低	成本较高，证书需要购买
链接缓存	相对高效	相对不高，会增加数据开销和功耗

口语化答题：

http 是超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个 客户端 和 服务器端 请求和应答的标准，用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。 而对于https，它是以安全为目标的http通道，是http的安全版，在http中加入了ssl层，https的安全基础是ssl。（👉这一段解答http和https是什么）

http 的连接很简单，是无状态的，传输的数据都是没有加密的，也就是明文的，网景公司设置了 ssl 协议来对 http 协议传输的数据进行加密处理，所以说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。（解答明文和加密发送的内容）

http 是超文本传输协议，信息是明文传输，https协议需要证书，且费用较高，是具有安全性的ssl加密传输协议，使用不同的连接方式，端口不同，一般来说，http协议的端口是80，而https的端口为443。（👉解答端口号问题）

使用 https 协议可以认证用户和服务器，确保数据发送到正确的客户端和服务器端。对于 https 协议的工作原理，客户端在使用 https 方式与 web 服务器通信时，首先客户使用https 的 url 访问服务器，则要求 web 服务器建立 ssl 连接， web 服务器接收到客户端的请求之后，会将网站的证书，返回或者传输给客户端，然后客户端和 web 服务器端开始协商 ssl 连接的安全等级，也就是加密等级，通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。（web服务器通过自己的私钥解密出会话密钥，通过会话密钥加密与客户端之间的通信） （👉解答 https 的连接方式）

建议使用 https ，比起同等 http 网站，使用 https 加密的网站在搜索结果中的排名会更高哦！

https 协议握手阶段比较费时，会使页面加载时间延长 50% ，增加 10%~20% 的耗电， https 缓存也不如 http 高效，会增加数据开销， ssl 证书也是需要钱💴的，功能越强大证书费用越高，同时， ssl 证书是需要绑定 ip 的，不能在同一个 ip 上绑定多个域名。（👉解答 https 的缺点）

小 Tips ：

• www，即 World Wide Web ，是万维网的简称。
• 为什么是 80 端口？80是 http 协议的默认端口，是在输入网站的时候，其实浏览器（ 非 IE ）已经帮你输入协议了，所以你输入 baudu.com ，其实是访问了 baidu.com:80 。

（二）http协议🧭

1、http1.0、http1.1、http2.0协议的基本内容

（1）http1.0

引入时间： http1.0 是1996年引入的。

主要内容：

• http1.0 仅提供了最基本的认证，用户名和密码都未加密；
• http1.0 仅支持短连接，每次发送数据都会经过 TCP 三次握手和四次挥手，效率低；
• http1.0 只使用了header的 if=modified-Since 和 Expires 作为缓存失效的标准；
• http1.0 不支持端点续传，每次发送数据都会发送全部数据；
• http1.0 认为每台计算机都只能绑定一个IP地址，不支持虚拟网络。

（2）http1.1

引入时间：http1.1是1999年引入的。

主要内容：

• http1.1 使用了摘要算法 (MD5/SHA-1) 进行身份验证；

• http1.1 默认使用长连接，即只需要建立一次连接，可以传输多次数据，传输完成之后，只需要一次切断即可。通过请求头的 keep-alive 设置 ( connection: keep-alive/close ) ；

• http1.1 支持断点续传，通过请求头的 Range 实现此功能；

• http1.1 使用了虚拟网络，在一台物理服务器上可以存在多个虚拟主机，共享同一个 IP 地址。

（3）http2.0

引入时间：2015年建立。

主要内容：

• 头部压缩：利用HPACK算法进行压缩；

  为什么引入头部压缩？

  由于HTTP1.1头部经常出现Cookie、Accept、Sever、Range等字段可能会占用几百到几千字节，而 body 有时只有几十字节（“头重身轻”）。

• 二进制格式： HTTP2.0 选择了更靠近TCP/IP的二进制格式，抛弃了ASCII码，提高了解析效率；

• 强化安全： HTTP2.0 一般都跑在HTTPS上；

• 多路复用：一个连接上可以有多个请求。

小tips：

记忆点：算法、连接、头部、断电续传、虚拟网络

2、http1.0、http1.1、http2.0协议之间的区别

（1）http1.0和http1.1主要区别

①长连接

• http1.0 需要使用keep-alive 参数来告知服务器端要建立一个长连接，而 http1.1 默认支持长连接；
• 使用长连接的原因在于， http 是基于TCP/IP协议的，创建一个 TCP 连接需要经过三次握手，有一定的开销，如果每次通讯都要重新建立连接的话，对性能有影响。因此最好能维持一个长连接，可以用一个长连接来发多个请求。

②节约带宽

• http1.1 支持只发送header信息（不带任何 body 信息），如果服务器认为客户端有权限请求服务器，则返回100，否则返回401；
  • 客户端如果接受到 100 ，才开始把请求 body 发送到服务器；
  • 这样当服务器返回 401 的时候，客户端就可以不用发送请求 body 了，节约了带宽；
• 另外 http1.1 还支持只传送内容的一部分；这样当客户端已经有一部分的资源后，只需要跟服务器请求另外的部分资源即可；这是支持文件断点续传的基础。

③HOST域（虚拟网络）

• http1.1 可以在 web server 上（例如tomat）设置虚拟站点，也就是说， web server 上的多个虚拟站点可以共享同一个ip和端口；
• http1.0 是没有host域的， http1.1 才支持这个参数。

（2）http1.1和http2.0主要区别

①多路复用

• 在 http1.1 协议中，浏览器客户端在同一时间针对同一域名的请求有一定数据限制，超过限制数目的请求会被阻塞。
• http2.0 使用了多路复用的技术，做到同一个连接并发处理多个请求，而且并发请求的数量比 http1.1 大了好几个数量级。
• 当然 http1.1 也可以多建立几个 TCP 连接，来支持处理更多并发的请求，但是创建 TCP 连接本身也是有开销的。

②首部压缩

• http1.1 不支持 header 数据的压缩， http2.0 使用HPACK算法对 header 的数据进行压缩，这样数据体积小了，在网络上传输就会更快。

③服务器推送

• 意思是说，当我们对支持 http2.0 的 web server 请求数据的时候，服务器会顺便把一些客户端需要的资源一起推送到客户端，免得客户端再次创建连接发送请求到服务器端获取。这种方式非常合适加载静态资源。
• 那么服务器端推送的这些资源是存在哪里呢？其实是存在客户端的某处地方，客户端直接从本地加载这些资源就可以了，不用走网络，速度自然是快很多的。

3、http2.0

（1）http2.0项目设定目标

• 页面加载时间 ( PLT ) 减少 50% 。

• 无需网站作者修改任何内容。

• 将部署复杂性降至最低，无需变更网络基础设施。

• 与开源社区合作开发此新协议。

• 收集真实性能数据，验证实验性协议是否有效。

（2）http2.0特性

①多路复用(请求与响应复用)

在 http1.1 中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。

http2.0 使用了多路复用的技术，做到同一个连接并发处理多个请求，且多路复用允许同时通过单一的 HTTP/2 连接发送多重的请求-响应信息。

②二进制分帧层

HTTP/2 所有性能增强的核心在于新的二进制分帧层，它定义了如何封装 HTTP 消息并在客户端与服务器之间传输。

HTTP2.0 会将所有的传输信息分割为更小的信息或者帧（二进制分帧），并对他们进行二进制编码。

③标头压缩

每个 HTTP 传输都需要承载一组标头，这些标头说明了传输的资源及其属性。

HTTP/2 使用 HPACK 压缩格式来压缩请求和响应标头元数据， HPACK 压缩格式是：

• 支持通过静态霍夫曼代码对传输的标头字段进行编码，从而减小了各个传输的大小。

• 要求客户端和服务器同时维护和更新一个包含之前见过的标头字段的索引列表（换句话说，它可以建立一个共享的压缩上下文），此列表随后会用作参考，对之前传输的值进行有效编码。

④服务器推送

HTTP/2 除了对最初请求的响应外，服务器还可以向客户端推送额外资源，而无需客户端明确地请求，很适合加载静态资源。

⑤数流优先级

将 HTTP 消息分解为很多独立的帧之后，我们就可以复用多个数据流中的帧，客户端和服务器交错发送和传输这些帧的顺序就成为关键的性能决定因素。

为了做到这一点，HTTP/2 标准允许每个数据流都有一个关联的权重和依赖关系：

可以向每个数据流分配一个介于 1 至 256 之间的整数，每个数据流与其他数据流之间可以存在显式依赖关系。

⑥每个来源一个连接

每个数据流都拆分成很多帧，而这些帧可以交错，还可以分别设定优先级。 因此，所有 HTTP/2 连接都是永久的，而且仅需要每个来源一个连接，随之带来诸多性能优势。

⑦流控制

流控制是一种阻止发送端向接收端发送大量数据的机制，以免超出后者的需求或处理能力。

在什么情况下会用到流控制呢？一般在发送方可能非常繁忙、处于较高的负载之下，也可能仅仅希望为特定数据流分配固定量的资源的情况下。会用到流控制。

4、说下http缓存吧（浏览器缓存）

（1）什么是缓存？又有什么用？

定义：缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。

作用：

• 可以显著提高网站和应用程序的性能。
• 减少了等待时间和网络流量。
• 减少了显示资源表示形式所需的时间。
• 使得页面加载更加快速。
• 缓解服务器端压力，提升性能。

（2）你知道有哪些缓存方式吗？

• 浏览器缓存
• 代理缓存
• 网关缓存
• CDN 缓存
• 反向代理缓存

（3）缓存位置

1）Service Worker

Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。

2）Memory Cache（内存中的缓存）

读取高效，但是持续性很短，一旦关闭 Tab 页面，内存中的缓存也就被释放了。

3）Disk Cache（硬盘中的缓存）

读取速度慢，容量和存储时效性上有优势。

4）Push Cache（推送缓存）

push Cache 是 http/2 中的内容，只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂。

（4）http的缓存是怎么生效的

http缓存分为强制缓存和协商缓存。

1）强制缓存

强制缓存就是文件直接从缓存中获取，不需要发送请求。

2）协商缓存

协商缓存意思是文件已经被缓存了，但是否从缓存中读取是需要和服务器进行协商，具体如何协商要看请求头/响应头的字段设置，相比于强制缓存，协商缓存是需要发送请求的。

3）强缓存相关字段

Cache-Control：通用消息头字段，被用于在http请求和响应中，通过指定指令来实现缓存机制。

强缓存相关字段有 expires，cache-control。如果 cache-control 与 expires 同时存在的话， cache-control 的优先级高于 expires。

• 缓存请求指令

Cache-Control: no-cache 、 no-store 、 max-age=<seconds> 、 max-stale[=<seconds>] 、 min-fresh=<seconds> 、 no-transform 、 only-if-cached

• 缓存响应指令

Cache-control: public 、 private 、 no-cache 、 no-store 、 no-transform 、 proxy-revalidate 、 max-age=<seconds> 、 s-maxage=<seconds> 、 must-revalidate

• cache-control指令解释

指令	说明
public	所有内容都将被缓存(客户端和代理服务器都可缓存)
private	内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存)
no-cache	必须先与服务器确认返回的响应是否被更改，然后才能使用该响应来满足后续对同一个网址的请求。因此，如果存在合适的验证令牌 (ETag)，no-cache 会发起往返通信来验证缓存的响应，如果资源未被更改，可以避免下载。
no-store	所有内容都不会被缓存到缓存或 Internet 临时文件中
must-revalidation/proxy-revalidation	如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证
max-age=xxx (xxx is numeric)	缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

4）协商缓存相关字段

协商缓存相关字段有 Last-Modified/If-Modified-Since，Etag/If-None-Match 。

5）协商缓存生效过程

• 浏览器第一次请求：

• 浏览器第二次请求：

6）浏览器缓存——如何选择，什么时候用哪一个呢？

浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流程如下：

• 先根据这个资源的一些 http header 判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；
• 当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些 request header 验证这个资源是否命中协商缓存，称为 http 再验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；
• 强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源； 区别是，强缓存不对服务器发送请求，但协商缓存会。当协商缓存也没命中时，服务器就会将资源发送回客户端。
• 当 ctrl+f5 强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；
• 当 f5 刷新网页时，跳过强缓存，但是会检查协商缓存。

• 详细文章补充👇

• 原文：你知道304吗？图解强缓存和协商缓存

• 链接：https://juejin.cn/post/6974529351270268958

5、http常见的头部字段

（1）General通用首部

字段	说明
Request URL	请求的域名
Request Method	请求方式
Status Code	返回的状态码
Remote Address	请求的远程地址

（2）Response响应首部

字段	说明
Cache-Control	服务器应遵循的缓存机制
Connection	连接方式（keep-alive：保持持久连接）
Content-Encoding	Web服务器表明自己使用了什么压缩方法（gzip、deflate）
Content-Language	Web服务器告诉浏览器自己响应的对象的语言
Content-Length	Web服务器告诉浏览器自己响应的对象的长度
Content-Range	Web服务器表明该响应包含的部分对象为整个对象的哪个部分，比如：Content-Range:bytes
Content-Type	Web服务器告诉浏览器自己响应对象的类型。比如：Content-Type:application/xml
ETag	告知客户端实体标识，是一种可将资源以字符串形式做唯一标识的方式，值有强弱之分
Expired	Web服务器表明该实体什么时候过期
Last-Modified	Web服务器表明该实体最后修改时间
Set-Cookie	开始状态管理所使用的Cookie信息
Location	与redirection配合使用，重定向

（3）Request请求首部

字段	说明
Accept	可接受的响应内容类型（Content-Types）
Accept-Charset	可接受的字符集
Accept-Encoding	浏可接受的响应内容的编码方式
Accept-Language	浏览器接收支持的语言
Accept-Datetime	可接受的按照时间来表示的响应内容版本
Authorization	用于表示 HTTP 协议中需要认证资源的认证信息
Cache-Control	用来指定当前的请求/回复中的，是否使用缓存机制
Connection	客户端（浏览器）想要优先使用的连接类型
Cookie	由之前服务器通过Set-Cookie设置的一个HTTP协议Cookie
Content-MD5	请求体的内容的二进制 MD5 散列值（数字签名），以 Base64 编码的结果
Content-Length	以 8 进制表示的请求体的长度
Content-Type	请求体的 MIME 类型 （用于 POST 和 PUT 请求中）
Referrer	来源协议，即发送请求页面的url
Expect	表示客户端要求服务器做出特定的行为
From	发起此请求的用户的邮件地址
If-Modified-Since	允许在对应的资源未被修改的情况下返回 304 未修改
If-None-Match	条件请求，判断实体ETag与资源的ETag是否不一致，如果不一致则返回200，请求响应和协商缓存；如果一致则返回304未修改（ 304 Not Modified），从本地缓存中读取即可。
If-Unmodified-Since	仅当该实体自某个特定时间以来未被修改的情况下，才发送回应
Max-Forwards	限制该消息可被代理及网关转发的次数
Range	表示请求某个实体的一部分，字节偏移以 0 开始
User-Agent	浏览器的身份标识字符串
Upgrade	要求服务器升级到一个高版本协议

（4）Cookie

1）Cookie服务的首部字段

首部字段名	说明	首部类型
Set-Cookie	开始状态管理所使用的的Cookie信息	响应首部字段
Cookie	客户端接收到的Cookie信息	请求首部字段

• Set-Cookie字段的属性：

属性	说明
NAME=VALUE	赋予Cookie的名称和其字段值（必须项）
expires=DATE	Cookie的有效期（指定浏览器可发送Cookie的有效期，若不指定则默认为浏览器关闭前为止）
path=PATH	用于限制指定Cookie发送范围的文件目录（若不指定则默认为文档所在目录）
domain-域名	作为Cookie适用对象的域名（若不指定则默认为创建Cookie的服务器名）
Secure	仅在HTTPS安全通信时才会发送Cookie
httpOnly	加以限制，使Cookie不能被javascript脚本访问

• Cookie：

告知服务器，客户端想获得http状态管理支持时，就会在请求中包含从服务器接收到的Cookie。接收多个时，同样可以以多个发送。

6、http状态码

状态码	描述
1XX	提示信息
2XX	成功，请求被成功处理
3XX	重定向相关
4XX	客户端错误
5XX	服务器端错误

常见的有200（正常） 、404（无法找到该网页资源） 、304（跳转页面） 、500（服务器错误）等，具体如下：

状态码	含义	用途
100	Continue 继续	客户端应继续其请求
101	Switching Protocols 切换协议	服务器根据客户端的请求切换协议。只能切换到更 高级的协议，例如，切换到 HTTP 的新版本协议
200	OK 请求成功	一般用于 GET 与 POST 请求
201	Created 已创建	成功请求并创建了新的资源
202	Accepted 已接受	已经接受请求，但未处理完成
203	Non-Authoritative Information 非授权信息	请求成功。但返回的 meta 信息不在原始的服务器，而是一个副本
204	No Content 无内容	服务器成功处理，但未返回内容。在未更新网页的情况下， 可确保浏览器继续显示当前文档
205	Reset Content 重置内容	服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
206	Partial Content 部分内容	服务器成功处理了部分 GET 请求
300	Multiple Choices 多种选择	请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
301	Moved Permanently 永久移动	请求的资源已被永久的移动到新 URI，返回信息会 包括新的 URL，浏览器会自动定向到新 URL。今后任何新的请求都应使用新的 URI 代替
302	Found 临时移动	与 301 类似。但资源只是临时被移动。客户端应继续使用原有 URI
304	Not Modified 未修改	所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305	Use Proxy 使用代理	所请求的资源必须通过代理访问
400	Bad Request	客户端请求的语法错误，服务器无法理解
401	Unauthorized	请求要求用户的身份认证
402	Payment Required	保留，将来使用
403	Forbidden	服务器理解请求客户端的请求，但是拒绝执行此请求
404	Not Found	服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站 设计人员可设置"您所请求的资源无法找到"的个性页面
405	Method Not Allowed	客户端请求中的方法被禁止
503	Service Unavailable	由于超载或系统维护，服务器暂时无法处理客户端的请求。 延时的长度可包含在服务器的 Retry-After 头信息中
504	Gateway Time-out	充当网关或代理的服务器，未及时从远端服务器获取请求
505	HTTP Version not supported	服务器不支持请求的 HTTP 协议的版本，无法完成处理

7、http的请求方式场景

（1）http请求方式

• get ，请求指定的页面信息，并返回实体主体；
• post ，请求服务器接受所指定的文档作为对所标识的 URL 的新的从属实体；
• head ，类似于get请求，只不过返回的响应中没有具体的内容，用户获取报头；
• options ，允许客户端查看服务器的性能，比如说服务器支持的请求方式等等；
• PUT ，传输文件；
• DELETE ，删除文件；
• OPTIONS ，询问支持的方法；
• TRACE ，追踪路径；
• CONNECT ，要求用隧道协议连接代理。

（2）GET和HEAD的区别

• HEAD 方法与 GET 相同，除了服务器在响应中不得返回消息正文。响应 HEAD 请求的 HTTP 标头中包含的元信息应该与响应GET请求发送的信息相同。此方法可用于获取有关请求所隐含的实体的元信息，而无需转移实体主体本身。
• 此方法通常用于测试超文本链接的有效性、可访问性和最新修改。
• 对 HEAD 请求的响应可以是可缓存的，因为响应中包含的信息可以用于从该资源更新先前缓存的实体。如果新的字段值表示缓存的实体与当前实体不同（如Content-Length ， Content-MD5 ， ETag 或 Last-Modified 的更改所指示），则缓存必须将缓存条目视为过期。

（3）GET和POST的区别

• GET 参数通过 url 传递， POST 放在 body 中。（http协议规定， url 在请求头中，所以大小被限制得很小）。
• GET 请求在 url 中传递的参数是有长度限制的，而 POST 没有。原因见上↑↑↑
• GET 在浏览器回退时是无害的，而 POST 会再次提交请求。
• GET 请求会被浏览器主动 cache ，而 POST 不会，除非主动设置。
• GET 比 POST 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息。
• 对参数的数据类型， GET 只接受 ASCII 字符，而 POST 没有限制。
• GET 请求只能进行 url(x-www=form-urlencoded) 编码，而 POST 支持多种编码方式。
• GET 产生一个数据包； POST产生两个 TCP 数据包。对于 GET 方式的请求，浏览器会把 http 的 header 和 data 一并发送出去，服务器响应 200 （返回数据）。而对于 POST ，浏览器先发送 header ，服务器响应 100 continue ，浏览器再发送 data ，服务器响应 200 OK （返回数据）。

（4）为什么跨域的复杂请求需要预检？

• 复杂请求可能会对服务器产生副作用。
• 例如 delete 和 put ，它们都会对服务器数据进行修改，所以在请求之前都要先询问服务器，当前网页域名是否在服务器的许可名单中，服务器允许后，浏览器才会发出正式的请求，否则不会发送正式请求。

8、http请求过程

（1）问题集锦

• 从浏览器地址栏输入url后发生了什么
• url渲染过程
• 解析url中的参数（写代码）
• url输入到页面展示的全过程
• html解析渲染过程

（2）问题解答

• 浏览器对请求的 url 进行 DNS 域名解析，找到真实的 IP 地址；

• 根据这个 IP ，找到对应的服务器，发起 TCP 的三次握手；

• 建立 TCP 连接后发起 HTTP 请求；

• 服务器响应 HTTP 请求，浏览器得到 html 代码；

• 浏览器解析 html 代码，并请求 html 代码中的资源（如 js 、 css 、图片等）；

  注：先得到 html 代码，才能去找这些资源；

• 浏览器对页面进行渲染呈现给用户；

• 服务器关闭 TCP 连接。

（3）补充

在了解了 http 请求过程后，需引申了解：

① DNS 域名如何解析；

②TCP 三次握手；

③为什么要三次握手；

④为什么 HTTP 请求要基于 TCP 来实现；

⑤ TCP 四次挥手；

⑥为什么要四次挥手；

⑦为什么建立连接是三次握手，关闭连接是四次挥手？

⑧如果已经建立连接，但是客户端突然出现故障了怎么办？

⑨ http 的请求方式有哪些。

9、http的渲染步骤

http渲染步骤为：

• ①解析HTML文件，构建DOM Tree；
• ②解析CSS文件，构建CSSOM Tree（CSS规则树）；
• ③将DOM Tree和CSSOM Tree合并，构建Render Tree（渲染树）；
• ④reflow（重排）：根据Render Tree进行节点信息计算（layout）；
• ⑤repaint（重绘）：根据计算好的信息绘制整个页面（Painting）。

（三）https协议🧭

1、https的优缺点

（1）优点

1）发送数据到正确的客户端

使用 HTTPS 协议可认证用户和服务器，确保数据发送到正确的客户机和服务器。

2）更安全

HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，要比 http 协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。

3）增加中间人攻击的成本

HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。

4）搜索排名更高

谷歌在2014跳转搜索算法，采用 HTTPS 加密的网站在搜索结果中的排名将会更高。

百度也在2018年发布百度对 HTTPS 站点的扶持态度，表明 HTTPS 将作为优质特征之一影响搜索排序。

（2）缺点

1）页面渲染更耗时间

因为SSL的缘故，HTTPS协议握手阶段比较费时，会使页面的加载时间延长近 50% 。

2）成本增加

SSL证书需要花钱，功能越强大的证书费用越高。

3）HTTPS连接缓存不如HTTP高效

HTTPS连接缓存不如 HTTP 高效，会增加数据开销和功耗，甚至已有的安全措施也会因此而受到影响。

4）SSL证书通常需要绑定IP

SSL证书通常需要绑定IP，不能在同一 IP上绑定多个域名， IPv4 资源不可能支撑这个消耗。

5）有局限性

HTTPS 协议的加密范围也比较有限，在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么作用。最关键的， SSL 证书的信用链体系并不安全，特别是在某些国家可以控制 CA 根证书的情况下，中间人攻击一样可行。

2、https的访问过程

问题集锦：

• https的握手过程
• https的请求过程
• https的加密和解密过程

简略解释：

• 客户使用 http 的 URL 访问 Web 服务器，要求与 Web 服务器建立 SSL 连接。
• Web服务器收到客户端请求后，会将网站的证书信息（证书中包含公钥）传送一份给客户端。
• 客户端的浏览器与 Web 服务器开始协商 SSL 连接的安全等级，也就是信息加密的等级。
• 客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥将会话密钥加密， 并传送给网站。
• Web 服务器利用自己的私钥解密出会话密钥。
• Web 服务器利用会话密钥加密与客户端之间的通信。

详细解释：

1. 客户端发起HTTPS 请求

用户在浏览器里输入一个 https 网址，然后连接到 server 的 443 端口。

2. 服务端的配置

就是指上述提到的数字证书；

3. 传送证书

Web 服务器收到客户端请求后，会将网站的证书信息（证书中包含公钥）传送一份给客户端。

4. 客户端解析证书

客户端会对证书进行判断，验证公钥是否有效，存在问题弹出会警告；若没有问题，生成一个随机值（私钥），然后用证书继续进行加密；

5. 传送加密信息

客户端将上加密后的随机值（私钥）提供给服务端，服务端会对其进行解密；

6. 服务端解密信息

服务端解密后得到随机值（私钥），然后把内容通过该值进行对称加密。对称加密就是指把要返回的信 息和随机值（私钥）混合加密，这样除非知道随机值（私钥），不然无法获取数据。

7. 传输加密后的信息

继续将加密后的信息传递给客户端；

8. 客户端解密信息

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

3、https为什么是安全的

HTTPS 相对于 HTTP 协议，加入了TLS/SSL，它的全称为安全传输层协议，是介于TCP和HTTP之间的一层安全协议。

TLS/SSL 的功能实现主要依赖三类基本算法：散列函数hash、对称加密、非对称加密。这三类算法的作用如下：

• 基于散列函数验证信息的完整性；
• 对称加密算法采用协商的秘钥对数据加密；
• 非对称加密实现身份认证和秘钥协商。

4、https如何进行性能优化？

（1）https访问速度优化

1）设置HSTS

服务端返回一个HSTS的http header，浏览器获取到头部之后，在一段时间内，不管用户输入www.baidu.com 还是http://www.baidu.com ，都会默认将请求内部跳转成https://www.baidu.com 。

2）Session resume

Session resume顾名思义就是复用Session，实现简化握手。

减少了CPU消耗，因为不需要进行非对称秘钥交换的计算。
提升访问速度，不需要进行第二次的完全握手，节省了一个 RTT 和计算耗时。

3）Nginx设置Ocsp stapling

OSCP Stapling工作原理简单来说就是浏览器发起Client Hello时会携带一个Certificate status request的扩展，服务端看到这个扩展后将OSCP内容直接返回给浏览器，完成证书状态检查。由于浏览器不需要向CA站点查询证书状态，这个功能对访问速度的提升非常明显。

4）使用SPDY或者HTTP2

SPDY 最大的特性就是多路复用，能将多个 HTTP 请求在同一个连接上一起发出去，不像目前的 HTTP 协议，只能串行地逐个发送请求。

HTTP2 支持多路复用，有同样的效果。

SPDY 和 HTTP2 目前的实现默认使用HTTPS协议。
SPDY 和 HTTP2 都支持现有的 HTTP 语义和API，对web应用几乎是透明的。

5）False start

简单概括 False Start 的原理就是在 client_key_exchange 发出时将应用层数据一起发出来，能够节省一个 RTT 。

（2）https计算性能优化

1）优先使用 ECC椭圆加密算术

ECC 椭圆加密算术相比普通的离散对数计算在速度和性能上要强很多。

对称密钥大小	RSA和DH密钥大小	ECC密钥大小
80	1024	160
112	2048	224
128	3072	256
192	7680	384
256	15360	521

对称密钥算法： AES 、 DES 、 RC4

非对称加密算法： RSA 、 DH 、 ECC

2）使用最新版的 openssl

openSSL 是一个开放源代码的软件库包，应用程序可以使用这个包来进行安全通信，避免窃听。

一般来讲，新版的 OpenSSL 相比老版的计算速度和安全性都会有提升。

3）硬件加速方案

• SSL 专用加速卡。

• GPUSSL 加速。

4）TLS 远程代理计算

🏖️二、浏览器存储

1、浏览器存储的方式

特性	cookie	localStorage	sessionStorage	indexedDB
数据生命周期	一般由服务器生成，可以设置过期时间	除非被清理，否则一直存在	页面关闭就清理	除非被清理，否则一直存在
数据存储大小	4K	5M	5M	无限
与服务端通信	每次都会携带在header中，对于请求性能有一定影响	不参与	不参与	不参与

补充：cookie 原本并不是用来储存的，而是用来与服务端通信的，需要存取请自行封装 api。

而 localStorage 则自带 getItem 和 setItem 方法，使用很方便。

localStorage 注意点：

• localStorage 只能存字符串，存取 JSON 数据需配合 JSON.stringify() 和 JSON.parse() ；

• 遇上禁用 setItem 的浏览器，需要使用 try...catch 捕获异常。

2、cookie、localStorage和sessionStorage

（1）cookie、localStorage和sessionStorage是什么？

1）cookie

• cookie 是一个非常具体的东西，指的就是浏览器里面能永久存储的一种数据，仅仅是浏览器实现的一种数据存储功能。

• cookie 由服务器生成，发送给浏览器，浏览器把 cookie 以kv的形式保存到某个目录下的文本文件内，下一次请求同一网站时会把该 cookie 发送给服务器。

• cookie 的过期时间由客户端设置。若不设置过期时间，则表示这个 cookie 的生命期为浏览器会话期间，关闭浏览器窗口， cookie 就会消失。这种生命期为浏览器会话期的 cookie 被称为会话cookie。如果设置了过期时间，则在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭也会一直有效。

• 会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再打开浏览器后这些 cookie 仍然有效直到超过设定的过期时间。对于保存在内存里的 cookie ，不同的浏览器有不同的处理方式。

• 可用 document.cookie = "" 来设置 cookie 的值。cookie的值是键值对的形式存在，当设置的键一样时，会覆盖掉原先的值。当键不一样时，对进行叠加操作。

2）localStorage

• 始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
• 同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效。

3）sessionStorage

• 浏览器存储的一种形式。

• 仅在当前浏览器窗口关闭前有效，不可能持久保持。

• 在相同浏览器里，如果是在当前页面里面跳转进入一个新的页面，可以共享；而如果是直接打开一个新的页面，不能共享。

（2）cookie、localStorage和sessionStorage的异同

以上是关于「offer来了」浏览器原理被问懵？5大知识板块巩固你的http知识体系（3.6w字）的主要内容，如果未能解决你的问题，请参考以下文章

「offer来了」1张思维导图，6大知识板块，带你梳理面试中CSS的知识点！

「offer来了」1张思维导图，6大知识板块，带你梳理面试中CSS的知识点！

「offer来了」从基础配置到高级配置，16大知识点带你巩固webpack知识体系

「offer来了」从基础配置到高级配置，16大知识点带你巩固webpack知识体系

被问懵了，什么是红黑树？

电子书《Offer来了：Java面试核心知识点精讲（原理篇）》