后会无期之jshttp解析（1）

后会无期吗，http

为何叫后会无期之jshttp解析，相信咱们不少人都看过各类各样的http文章教程，可是真的就懂了http了吗，或许别人问起的时候，仍是没法具体详细地解释，这让我想起了电影后会无期里面的台词，

从小听了不少大道理，可依然过很差这一辈子

正如咱们看了这么http教程，却依然没法真正理解http，究其缘由，就是咱们不少时候都是把http当成一个黑盒子来使用，知道强缓存和协商缓存是干什么的，可是缺总记不住请求头和返回头

既然如此，那不如让咱们看看http是怎么实现的，对于咱们FE来讲，最熟悉的语言就是js了，那咱们就经过解读jshttp这个一系列js实现的http底层的库来完善咱们最后一个技能点吧

jshttp是什么？

Low-Level JavaScript HTTP-related Modules

js实现的底层http相关的库，打开这个库，咱们能够发现耳熟能详的的nodejs大大，TJ、Doug Wilson等都是这个系列的维护者，并且这一些库被express、koa各类咱们能数的过来的web框架依赖着，是经得起工业考验的，那么接下来的我讲经过解读里面的每一个库来加深咱们对http的里面每一个概念的理解

fresh

此次咱们开篇第一章，解读是fresh这个库，首先这个库是干什么的,官方定义

HTTP response freshness testing

用于检验咱们的资源是不是新鲜的，说白了，就是用来处理http缓存的库。

说到协商缓存，咱们马上想起Last-Modified 和 Etag,就是这两个返回头，帮助咱们在服务器校验文件是否更新了，那服务器是什么校验的呢，那就是咱们主角fresh登场了

var reqHeaders = { 'if-none-match': '"foo"' }
var resHeaders = { 'etag': '"bar"' }
fresh(reqHeaders, resHeaders)
// => false

var reqHeaders = { 'if-none-match': '"foo"' }
var resHeaders = { 'etag': '"foo"' }
fresh(reqHeaders, resHeaders)
// => true
复制代码

咱们能够看到，fresh返回false说明资源已通过期了，返回true的时候说明资源没有改变，

talk is cheap, show me the code ---linus

深刻代码

首先看下面代码，咱们能够看到fresh传入两个参数，reqHeaders是本次发起的请求头，而resHeaders是服务器对应此次请求的返回头，若是同时请求头if-modified-since和if-none-match都没有，那么说明协商缓存失效

function fresh (reqHeaders, resHeaders) {
// fields
  var modifiedSince = reqHeaders['if-modified-since']
  var noneMatch = reqHeaders['if-none-match']

  // unconditional request
  if (!modifiedSince && !noneMatch) {
    return false
  }
  ....
}
复制代码

那么若是协商缓存请求头都存在呢，咱们先看下是否存在强缓存cache-control:no-cache，若是存在，直接返回false

var cacheControl = reqHeaders['cache-control']
  if (cacheControl && CACHE_CONTROL_NO_CACHE_REGEXP.test(cacheControl)) {
    return false
  }
复制代码

由于Etag的优先级比Last-Modified高，因此接下来会先校验if-none-match，若是if-none-match存在，且不为'*',

// if-none-match
  if (noneMatch && noneMatch !== '*') {
    var etag = resHeaders['etag']

    if (!etag) {
      return false
    }

    var etagStale = true
    var matches = parseTokenList(noneMatch)
    for (var i = 0; i < matches.length; i++) {
      var match = matches[i]
      if (match === etag || match === 'W/' + etag || 'W/' + match === etag) {
        etagStale = false
        break
      }
    }

    if (etagStale) {
      return false
    }
  }
复制代码

为*的时候,表示

采用其余方法，尤为是 PUT，将 If-None-Match used 的值设置为 * ，用来生成事先并不知道是否存在的文件，能够确保先前并无进行过相似的上传操做，防止以前操做数据的丢失。这个问题属于更新丢失问题的一种。

那不为*的时候，咱们就要跟服务器将要返回给浏览器的etag进行比较，只有etagStale为true，说明资源改变了，才会返回false

假设etag和if-none-match的值相等，那么咱们须要进一步看看是否存在if-modified-since

// if-modified-since
  if (modifiedSince) {
    var lastModified = resHeaders['last-modified']
    var modifiedStale = !lastModified || !(parseHttpDate(lastModified) <= parseHttpDate(modifiedSince))

    if (modifiedStale) {
      return false
    }
  }
复制代码

若是lastModified为false或者modifiedSince的时间早于lastModified的时间，说明资源已经被修改了，直接返回false

那么若是通过上面两步，都没有返回false，说明服务器资源都没有被改变，则直接返回true

总结

怎么样，是否是发现服务器处理缓存也就那么一回事，经过上面的解读，是否是对协商缓存有了更深的理解，由于咱们已经深刻底层，知道服务器是如何对比文件是否更新了，是否是对接下来的后会无期之jshttp解析系列更有兴趣了，关注我，让咱们一块儿继续接下来的jshttp之旅吧