浏览器相关知识

accpet

accpet代表发送端（客户端）希望接受的数据类型

content-type

代表发送端（客户端|服务端）发送的实体数据的数据类型

Content-type类型

常见的媒体格式类型如下：

• text/html ： HTML格式
• text/plain ：纯文本格式
• text/xml ： XML格式
• image/gif ：gif图片格式
• image/jpeg ：jpg图片格式
• image/png：png图片格式

以application开头的媒体格式类型：

• application/xhtml+xml ：XHTML格式
• application/xml ： XML数据格式
• application/atom+xml ：Atom XML聚合格式
• application/json ： JSON数据格式
• application/pdf ：pdf格式
• application/msword ： Word文档格式
• application/octet-stream ： 二进制流数据（如常见的文件下载）
• application/x-www-form-urlencoded ： <form encType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

另外一种常见的媒体格式是上传文件之时使用的：

• multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式

常见错误编码

• 301: 代表永久性转移
• 302：代表暂时性转移
• 304：客户端有缓冲的文档并发出了一个条件性的请求。服务端告诉客户端，原来缓冲的文档还可以继续使用。

在第一次请求服务器的时候在获取资源之后是会先把该资源缓存在本地的，同时服务器response返回了一个响应头ETag，ETag全称Entity Tag，用来标识一个资源。在具体的实现中，ETag可以是资源的hash值，也可以是一个内部维护的版本号。但不管怎样，ETag应该能反映出资源内容的变化，这是Http缓存可以正常工作的基础。服务器对于hello world这个字符串使用上述返回的ETag来表示，只要hello world这个资源不变，这个Etag就不会变。

客户端第二次请求服务器的时候，利用请求头If-None-Match来告诉服务器自己已经有个ETag为xxx的资源。如果服务器上的资源没有变化，也就是说服务器上的资源的ETag也是xxx的话，服务器就不会再返回该资源的内容，而是返回一个304的响应，告诉浏览器该资源没有变化，缓存有效，浏览器将直接调用本地缓存。！

cache-control

利用cache-control来定义缓存策略，cache-control在控制谁在什么条件下可以缓存影响以及可以缓存多久。最快的请求是不必与服务器进行通信的请求：通过相应的本地副本，我们可以避免所有的网络延迟以及数据传输的数据成本。

• max-age：该指令指定从当前请求开始，允许获取的响应被重用的最长时间(单位为秒。例如：Cache-Control:max-age=60表示响应可以再缓存和重用 60 秒。需要注意的是，在max-age指定的时间之内，浏览器不会向服务器发送任何请求，包括验证缓存是否有效的请求，也就是说，如果在这段时间之内，服务器上的资源发生了变化，那么浏览器将不能得到通知，而使用老版本的资源。所以在设置缓存时间的长度时，需要慎重
• public和private：如果设置了public，表示该响应可以再浏览器或者任何中继的Web代理中缓存，public是默认值，即Cache-Control:max-age=60等同于Cache-Control:public, max-age=60。在服务器设置了private比如Cache-Control:private, max-age=60的情况下，表示只有用户的浏览器可以缓存private响应，不允许任何中继Web代理对其进行缓存 - 例如，用户浏览器可以缓存包含用户私人信息的 HTML 网页，但是 CDN 不能缓存。
• 需要注意的是，no-cache这个名字有一点误导。设置了no-cache之后，并不是说浏览器就不再缓存数据，只是浏览器在使用缓存数据时，需要先确认一下数据是否还跟服务器保持一致。如果设置了no-cache，而ETag的实现没有反应出资源的变化，那就会导致浏览器的缓存数据一直得不到更新的情况
• no-store：如果服务器在响应中设置了no-store即Cache-Control:no-store，那么浏览器和任何中继的Web代理，都不会存储这次相应的数据。当下次请求该资源时，浏览器只能重新请求服务器，重新从服务器读取资源。

get和post的区别

从tcp/ip的角度回答这个问题：GET产生一个TCP数据包；POST产生两个TCP数据包。对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

• GET在浏览器回退时是无害的，而POST会再次提交请求。
• GET产生的URL地址可以被Bookmark，而POST不可以。
• GET请求会被浏览器主动cache，而POST不会，除非手动设置。
• GET请求只能进行url编码，而POST支持多种编码方式。
• GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
• GET请求在URL中传送的参数是有长度限制的，而POST么有。
• 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
• GET参数通过URL传递，POST放在Request body中。

ajax跨域请求携带cookie

xhrFields.withCredentials: true 参数，服务器端通过在响应 header 中设置 Access-Control-Allow-Credentials = true 来运行客户端携带证书式访问。通过对 Credentials 参数的设置，就可以保持跨域 Ajax 时的 Cookie。
https://blog.csdn.net/weixin_40811829/article/details/82050980

强缓存和协商缓存

强缓存

1. cache-control:max-age=xxxx public
   客户端和代理服务器都可以缓存该资源；
   客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，如果用户做了刷新操作，就向服务器发起http请求

2. cache-control: max-age=xxxx，private
   只让客户端可以缓存该资源；代理服务器不缓存
   客户端在xxx秒内直接读取缓存,statu code:200

3. cache-control: max-age=xxxx，immutable
   客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，即使用户做了刷新操作，也不向服务器发起http请求。

4.cache-control:no-cache
跳过设置强缓存，但是不妨碍设置协商缓存；一般如果你做了强缓存，只有在强缓存失效了才走协商缓存的。

5.cache-control:no-store
不缓存，这个会让客户端、服务端不缓存，也就没有所谓的强缓存、协商缓存了

协商缓存

协商缓存就是客户端请求资源发现过期，然后去请求服务器，而这个时候请求服务器的过程就是可以设置协商缓存。

如何设置协商缓存？
respnse header里面设置

etag: '5c20abbd-e2e8'
last-modified: Mon, 24 Dec 2018 09:49:49 GMT

etag：每个文件有一个，改动文件了就变了，就是个文件hash，每个文件唯一，就像用webpack打包的时候，每个资源都会有这个东西

last-modified：文件的修改时间，精确到秒

也就是说，每次请求返回来 response header 中的 etag和 last-modified，在下次请求时在 request header 就把这两个带上，服务端把你带过来的标识进行对比，然后判断资源是否更改了，如果更改就直接返回新的资源，和更新对应的response header的标识etag、last-modified。

所以协商缓存步骤总结：

请求资源时，把用户本地该资源的 etag 同时带到服务端，服务端和最新资源做对比。
如果资源没更改，返回304，浏览器读取本地缓存。
如果资源有更改，返回200，返回最新的资源。

https://www.jianshu.com/p/9c95db596df5

http版本

• 1.0 协议缺陷
  • 无法复用链接，完成即断开，重新慢启动和TCP3次握手。
  • 线头阻塞，导致请求之间相互影响。
• 1.1
  • 长连接，复用
  • host字段指定对应的虚拟站点
  • 新增功能
    • 断点续传
    • 身份认证
    • 状态管理
    • cache缓存
      • cache-control
      • Etage
      • lastModified
• 2.0
  • 多路复用
  • 二进制分帧层：应用层和传输层
  • 首部压缩
  • 服务端推送

https

• 证书
• SSL加密
• 端口443

TCP三次握手

建立连接前，客户端和服务端需要通过握手来确认对方。

• 客户端发送syn(同步序列编号)请求，进入syn_send状态，等待确认。
• 服务端接收并确认syn包发送syn+ask包，进入syn_recv状态
• 客户端接收syn+ask包后，发送ack包，双方进入establishen(确定)状态