一、history 和 location

history（实例）、History（构造函数）

  • history 是当前页面切换的历史记录，里面有当前切换地址的一些信息和操作方法
  • History 自己身上的 length 代表了当前历史栈中存储的历史页面的个数
  • History 的原型上有 back()、forward()、go()等等方法
    • history.back(); 实现页面的后退
    • history.forward(); 实现页面的前进
    • history.go(); 里边可以传参：-1，后退一级；1，前进一级；…

location

  • location 对象中存储了一些信息和方法可以操作和获取 url
    • hash: 哈希值
    • host：域名 + 端口号
    • hostname：域名
    • port: 端口号
    • href：当前 url
    • pathname：资源路径名称
    • protocol：协议
    • search: ？参数(給后台发送的参数)
    • reload(); 刷新页面(刷新页面之前 history 中的页面信息还在)
    • replace(); 替换页面(把当前历史记录中的页面进行替换，打开一个新的页面)

二、HTTP 请求方式

  • GET 系列
    • GET
    • DELETE 一般用于告诉服务器删除某些信息
    • HEAD 只获取响应头的信息。
    • OPTIONS 试探性的请求，給服务器发送请求，看看服务器能都接收到，接收到能不能正常的返回
  • POST 系列
    • PUT 告诉服务器要存储的东西
    • POST

三、$.ajax

  • $包装
  • 1、参数的解构赋值
  • 2、初始化之后的参数 data
  • 3、data 有值&&methods 值为 GET 类型，进行 url 的字符串拼接(有问号，首先拼接&;没有问号,首先拼接?)
  • 4、判断 methods 为 GET 系列&&属性 cache 的值为 false，说明不走缓存(在 url 后面拼接一个时间戳或者随机数)
  • 5、处理请求超时的时间设置

  • 6、设置请求头,headers 是一个对象; 设置请求头必须在 OPEND 状态之后

  • 7、

四、HTTP 报文

  • 请求头报文
  • 响应头报文
  • 强缓存和协商缓存
    • 缓存的优点
      • 减少不必要的数据传输，节省带宽
    • 缓存的缺点
    • 强缓存
      • 当浏览器去请求某个文件的时候，服务端就在 respone header 里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制，具体表现为：
        • respone header 的 cache-control，常见的设置是 max-age public private no-cache no-store 等
          • 例如：cahe-control:max-age=31536000,public,immutable
          • max-age：31536000;表示缓存的时间是 31536000 秒（1 年）
          • public 表示可以被浏览器和代理服务器缓存，代理服务器一般可用 nginx 来做。
          • immutable 表示本地资源永远不变
      • 强缓存总结
        • 1、cache-control: max-age=xxxx,public
          • 客户端和代理服务器都可以缓存该资源
          • 客户端在 xxx 秒的有效期内，如果有请求该资源的需求就直接读取缓存 status code：200
          • 如果用户做了刷新操作，就向服务器发起 HTTP 请求
        • 2、cache-control：max-age=xxx,private
          • 只让客户端可以缓存该资源，代理服务器不缓存
          • 客户端在 xxx 秒之内，有请求该资源的需求就直接读取缓存 status code：200
        • 3、catch-control：max-age=xxx,immutable
          • 客户端在 xxx 秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，
          • 即使用户做了刷新操作，也不向服务器发起 http 请求
        • 4、cache-control: no-cache
          • 跳过设置强缓存，但是不妨碍设置协商缓存；一般如果你做了强缓存，只有在强缓存失效了才走协商缓存的，设置了 no-cache 就不会走强缓存了，每次请求都回询问服务端。
        • 5、cache-control: no-store
          • 不缓存，这个会让客户端、服务器都不缓存，也就没有所谓的强缓存、协商缓存了。
    • 协商缓存
      • 客户端请求该资源时发现强缓存设置的时间过期了，这是就会去请求服务器了，而这时候去请求服务器的这过程就可以设置协商缓存。这时候，协商缓存就是需要客户端和服务器两端进行交互的。
      • 怎么设置协商缓存？ 在 response header 里面设置
        • etag：每个文件有一个，改动文件了其值就会变，就是文件 hash，每个文件唯一
          • 就像用 webpack 打包的时候，每个资源都会用到这个东西。例如：app.js 打包之后变为 app.c20sadasd.js,加上唯一 hash，也是为了解决缓存问题
          • etag：’5c20abbd-e2e8’
        • last-modified：文件的修改时间，精确到秒
          • last-modified: Mon, 24 Dec 2020 09:49:49 GMT
      • 每次请求返回来的 response header 中的 etag 和 last-modified，在下一次请求时在 request header 中把这两个标识带上；服务端会把你带过来的标识进行对比；然后判断资源是否更改，如果更改，直接返回新的资源，并且更新对应的 response header 中的两个标识；如果资源没变，那就不变 etag、last-modified，这时候对客户端来说，每次请求都是要进行协商缓存
        • 如果服务器发现资源没有过期，会走以下流程：
          • 发送请求—>看资源是否过期—>过期—>请求服务器—>服务器对比资源是否真的过期—>没有过期—>返回 304 状态码—>客户端用缓存的老资源
        • 当然，如果服务器发现资源真的过期，会走以下流程：
          • 发送请求—>看资源是否过期—>过期—>请求服务器—>服务器对比资源是否真的过期—>过期—>返回 200 状态码—>客户端会同第一次接受该资源一样，记下当前的 cache-control 中的 max-age、etag、last-modified 等。
      • 协商缓存步骤总结：
        • 请求资源时，把用户本地资源的 etag 同时带到服务器，服务器和最新资源对比
        • 如果资源没更改，返回 304，浏览器读取本地缓存
        • 如果资源有更改，返回 200，返回最新的资源
      • 补充一点，response header 中的 etag、last-modified 在客户端重新向服务端发起请求时，会在 request header 中换个 key 名 ```javascript // response header etag: ‘5c20abbd-e2e8’ last-modified: Mon, 24 Dec 2018 09:49:49 GMT

// request header 变为 if-none-matched: ‘5c20abbd-e2e8’ if-modified-since: Mon, 24 Dec 2018 09:49:49 GMT ```