前端 的http 20 問

最近想了好久，HTTP 知識學習實踐，最好用mvc形式去實踐

第 1 問 cookie 、session、 token 的知識

cookie 是將數據存儲在瀏覽器的本地的一種東西。本問題不是講它和瀏覽器其餘的存儲的區別。主要講是 cookie 的使用，尤爲很常見的是 cookie 存token。

一、首先爲了安全，前端禁止操做cookie，後端須要設置 http-only。 二、token 最多見就是表示用戶登陸態。爲何採用一個 cookie 去存入一個 token 來表示登陸態？首先，你是否常常聽見 http 無狀態。什麼意思，這麼說吧，http 鏈接沒法表示該用戶登陸。一般解決方法，token （也可叫sessionId），將 token 存入到 cookie 中，前端發送請求，後端獲取cookie，也就能夠拿到 token，拿到 token，到後端緩存中（也能夠說內存，一般使用redis），查詢一 token 座位爲鍵名的值，若是有，就表示登陸。

說了這麼多，還不如一張圖

第 2 問 gzip 壓縮

gzip壓縮在http請求響應的過程，能夠用一張簡單流程圖來理解。

用 nodejs 寫個小的demo

// 文件：server.js
// 引入依賴
const http = require("http")
const url = require("url")
const path = require("path")
const fs = require("fs")
const zlib = require("zlib")

// 建立服務器
const server = http.createServer((req, res) => {
  // 處理 pathname，"/" 時默認讀取 "/index.html"
  let {
    pathname
  } = url.parse(req.url, true)
  pathname = pathname !== "/" ? pathname : "/index.html"

  // 獲取讀取文件的絕對路徑
  let p = path.join(__dirname, pathname)

  // 查看路徑是否合法
  fs.access(p, err => {
    // 路徑不合法則直接中斷鏈接
    if (err) return res.end("Not Found")

    // 獲取瀏覽器支持的壓縮格式
    let encoding = req.headers["accept-encoding"]

    // 建立可讀流
    let rs = fs.createReadStream(p)
    let compress, compressType

    // 支持 gzip 使用 gzip 壓縮，支持 deflate 使用 deflate 壓縮
    if (encoding && encoding.match(/\bgzip\b/)) {
      compress = zlib.createGzip()
      compressType = "gzip"
    } else if (encoding && encoding.match(/\bdeflate\b/)) {
      compress = zlib.createDeflate()
      compressType = "deflate"
    } else {
      // 不然直接返回可讀流
      return rs.pipe(res)
    }

    // 將壓縮流返回並設置響應頭
    res.setHeader("Content-Encoding", compressType)
    rs.pipe(compress).pipe(res)
  })
})

server.listen(3000, () => {
  console.log("server start 3000")
})
複製代碼

代碼地址

參考地址
參考地址
推薦參考地址

最後一個問，gzip 究竟是前端作，仍是後端，仍是運維？🤔

第 3 問 dns 預解析理解

【性能優化】DNS 預解析