Please enable JavaScript.

Coggle requires JavaScript to display documents.

網站優化 (前台 (減少http request, 用CDN, 壓縮資料, css放在頂端, js放在底端, 避免css 運算式, 用外部js…

- - - - 可以减少带宽
      - 缩短网页请求资源的距离，减少延迟
      - 减少冗余的数据传输
    - - Cache-Control :pencil2:
        
        指令
        
        s-maxage: 只用于共享缓存（比如 CDN缓存）
        
        public/private
        
        預設public
        
        cache 能否被client共享
        
        no-cache
        
        用於「請求」
        
        意義: 不得在與源伺服器成功驗證前，使用快取滿足「此請求」
        
        可以儲存回應 (快取)，且若後續請求未使用 no-cache 指令，
        則允許直接使用新鮮的 (fresh) 快取，而不需發送網路請求。
        
        缓存前要向服务器确认资源是否被更改
        
        確保不緩存需搭配 private+過去時間
        
        no-store
        
        每次请求资源都要从服务器重新获取
        
        must-revalidate
        
        僅用於回應訊息
        
        意義: 一旦「此回應」不新鮮，
        不得在與源伺服器成功驗證前，使用它 (快取) 滿足後續請求
        
        用來杜絕上述陳舊回應 (stale response) 能直接使用的例外。
        (某些瀏覽器，允許在斷網、Server 掛掉時，繼續使用陳舊回應。)
        
        若快取驗證因某種原因無法到達源伺服器時，
        必須生成 504 (Gateway Timeout) — 閘道逾時錯誤，而非直接使用快取。
        
        Cache 不可用返回 504 Gateway Timeout
        
        Cache 可以使用返回 304 Not Modified
        
        需要與服務器確認過才能決定是否使用cache
        
        max-stale:
        
        最大失效值 (單位: 秒)
        
        Cache-Control: max-stale=10
        
        僅用於請求訊息
        
        代表「此請求」允許快取過期後還能使用多久，而不需送出網路請求 (不驗證)
        
        不指定值，代表過期多久都無妨
        
        能與 max-age (請求) 指令共存
        
        範例: 「此請求」將快取存在時間大於 10 秒後，視為過期，但能再使用 87 秒 :
        Cache-Control: max-age=10, max-stale=87
        
        max-age:最大的有效时间
        
        优先级高于Expires
        
        HTTP 1.1 Header
        
        RFC7234-Cache-Control
      - Expires :pencil2:
        
        需要和 Last-modified 结合使用
        
        HTTP/1.0
        
        浏览器判断文件是否过期时，对比的是用户机器上的时间而不是服务器上的时间
        
        用户本地时间是会影响到原先的缓存意图
        
        协商缓存
        
        Last-modified和If-Modified-since
        
        基于客户端和服务器端协商的缓存机制
        
        需要与cache-control共同使用
        
        Last-modified为服务端文件的最后修改时间，由服务端响应
        
        If-Modified-since 是一个条件式请求首部
        
        200: 请求的资源在给定的日期时间之后对内容进行过修改的情况下才会将资源返回
        
        304 Not Modified: 资源从那时起未经修改
        
        在 Last-Modified首部中会带有上次修改时间
        
        Etag 和 If-none-match
        
        文件内容的hash值
        
        根据当前文件内容生成一段 hash字符串
        
        唯一标识资源的状态，由服务端产生
        
        需要与cache-control共同使用
        
        通过 If-None-Match 首部传回服务器，验证资源是否已经修改
        
        相较于 last-modified 的好处
        
        支持某些无法精确得到资源最后修改时间的服务器
        
        Last-Modified指定的修改时间是精确到"秒"级的
        
        可以偵測內容改變而不單是日期異動
        
        同時提供Etag和Last-modified
        
        都驗證通過才會返回 304 Not Modified
        
        RFC
        
        如果 Cache-Control 存在則會被忽略
      - Pragma
        
        HTTP/1.0 Header
        
        只能跟 HTTP/1.0的請求者使用
        
        運作的結果跟 Cache-Control: no-cache一樣
        
        RFC規範
      - 常用策略
        
        杜絕快取使用
        
        Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0
        杜絕快取使用 (含中介 — private 指令)
        
        Cache-Control: private, no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0
        強制驗證 (錯誤 Expires 值)
        
        Cache-Control: no-cache, must-revalidate Pragma: no-cache Expires: 0
        強制驗證 (過去時間 Expires 值)
        
        Cache-Control: no-cache, must-revalidate Pragma: no-cache Expires: Sat, 01 Jan 2000 00:00:00 GMT
        強制驗證 (max-age)
        
        Cache-Control: max-age=0 Expires: 0
  - - - 大小：一般为 4KB
      - 每次请求会默认携带在 HTTP 头
        
        cookie保存过多数据会降低 HTTP 利用率
      - 生命期
        
        服务器生成，可设置失效时间
        
        浏览器端生成 Cookie，默认是关闭浏览器后失效
    - - 大小：为 5M 左右
      - 只在本地使用，不与服务端通信
      - 生命期：除非主动删除数据，否则数据永远不会过期
      - PC 上的兼容性不太好
    - - 大小：为 5M 左右
      - 只在本地使用，不与服务端通信
      - 生命期：会话级别的浏览器存储