減少http請求
性能黃金法則
只有10％-20％的最終用戶響應時間花在接收請求的HTML文檔上，剩下的80％-90％時間花在HTML文檔所引用的所有組件（圖片，script，css，flash等等）進行的HTTP請求上。
改善響應時間的最簡單途徑就是減少組件的數量，井由此減少HTTP請求的數量。
實現
- 圖片地圖
將多個圖片合井為一張圖片，然后以位置信息定位超鏈接。把HTTP請求減少為一個，可以保證設計的完整性和功能的齊全性
<map><area>標簽</area></map>
-
CSSSprites
CSSSprites中文翻譯為CSS精靈，通過使用合並圖片，通過指定css的backgroud-image和backgroud-position來顯示元素。
backgroud-position屬性
backgroud-position:x y;
x和y可以寫負值也可以寫正值，我們可以想象圖片的左上方為（0，0），以（0，0）坐標向右是為負數的x軸，以（0，0）坐標向下是為負數的y軸。
圖片地圖與cSS精靈的響應時間基本上相同，但比使用各自獨立圖片的方式要快50％以上. -
合井腳本和樣式表
使用外部的js和css文件引用的方式，因為這要比直接寫在頁面中性能要更好一點
獨立的一個js比用多個js文件組成的頁面載入要快38％.把多個腳本合井為一個腳本，把多個樣式表合並為一個樣式表。 -
圖片使用Base64編碼減少頁面請求數,采用Base64的編碼方式將圖片直接嵌入到網頁中，而不是從外部載入。
<img src="data:image/g(f;base64,/9j/4AAQSkZJ......">
瀏覽器緩存
緩存分類
HTTP緩存模型中，如果請求成功會有三種情況.
- 200 from cache:直接從本地緩存中獲取響應，最快速，最省流量，因為根本沒有向服務器發送請求
- 304 NotModified：協商緩存，瀏覽器在本地沒有命中的情況下,請求頭中發送一定的校驗數據到服務端，如果服務端數據沒有改變,瀏覽器從本地緩存響應，返回304.快速，發送的數據很少，只返回一些基本的響應頭信息，數據量很
小，不發送實際響應體 - 200 OK：以上兩種緩存全都失敗，服務器返回完整響應。沒有用
到緩存，相對最慢。
本地緩存
瀏覽器認為本地緩存可以使用，不會去請求服務端
相關Header
Pragma：Http1.0時代的遺留產物，該字段被設置為no-cache時，會告知瀏覽器禁用本地緩存，即次都向服務器發送請求。
Expires：HTTPI.0時代用來啟用本地緩存的字段，expires值對應一個形如Thu，31 Dec 2037 23:55:55GMT的格林威治時間，告訴瀏覽器緩存實現的時刻，如果還沒到該時刻，表明緩存有效，無需發送請求。
Cache-Control：HTTP1.1針對Expires時間不一致的解決方案，運用cache-contro咭知瀏覽器緩存過期的時間間隔而不是時刻，即使具體時間不一致，也不影響緩存的管理。
Cache-Control
no-store：禁止瀏覽器緩存響應
no-cache：不允許直接使用本地緩存，先發起請求和服務器協商
max-age=delta-seconds：告知瀏覽器該響應本地緩存有效的最長期限，以秒為單位
優先級
Pragma>Cache-Control>Expires
協商緩存
當瀏覽器沒有命中本地緩存，如本地緩存過期或者響應中聲明不允許直接使用本地緩存，那么瀏覽器肯定會發起服務端請求.服務端會驗證數據是否修改，如果沒有通知瀏覽器使用本地緩存。
相關Header
If-Modified-Since：得到資源的最后修改時間后，會將這個信息通過If·Modified-Since提交到服務器做檢查，如果沒有修改，返回304狀態碼.
If-Modified-Since：Mon,28Sep201508：06：43GMT
ETag：HTTPI.I推出，文件的指紋標識符，如果文件內容修改，指紋會改變
Etag：”78437822c6739"
If-None-Match：本地緩存失效，會攜帶此值去請求服務端，服務端判斷該資源是否改變，如果沒有改變，直接使用本地緩存，返回304。
適合緩存的內容
不變的圖像，如logo，圖標等。js、“s靜態文件
可下載的內容，媒體文件
建議使用協商緩存
HTML文件
經常替換的圖片
經常修改的js、css文件.
js、css文件的加載可以加入文件的簽名來拒絕緩存
index.css?簽名
index.簽名.js
不建議緩存的內容
用戶隱私等敏感數據
經常改變的api數據接口
Nginx配置緩存策略
本地緩存配置
add_header指令：添加狀態碼為2xX和3xX的響應頭信息
add_header name value [always];
可以設置Pragma/Expires/Cache-Control可以繼承
expires指令：通知瀏覽器過期時長
expires time;
為負值時表示cache-control:no-cache;
當為正或者0時，就表示Cache-Control:max-age=指定的時間；
當為max時，會把Expires置為"Thu, 31 Dec 2037 23：55：55 GMT"，Cache-Control設置到10年；
location ~ .*\.(js.css)?$
{
expires 12h；
}
協 商 緩 存 相 關 配 置
Etag 指 令 ： 指 定 簽 名
etag on | off 默認是on
前 端 代 碼 和 資 源 的 壓 縮
優 勢 :讓 資 源 文 件 更 小 ， 加 快 文 件 在 網 絡 中 的 傳 輸 ， 讓 網 頁 更 快 的 展 現 降 低 帶 寬 和 流 量 開 消
壓 縮 方 式
JS 、 CSS 、 圖 片 、 HTML 代 碼 的 壓 縮
Gzip 壓 縮
JavaScript 代 碼 壓 縮
JavaScript 壓 縮 的 原 理 一 般 是 去 掉 多 余 的 空 格 和 回 車 、 替 換 長 變 量 名 、 簡 化 一 些 代 碼 寫 法 等 。
常用壓縮工具: UglifyJS ,YUI Compressor. Closure Compiler
cSS 代 碼 壓 縮
原理和JavaScript 壓 縮 原 理 類 似 ， 同 樣 是 去 除 空 白 符 、 注 釋 井 且 優
化 一 些 css 語 義 規 則 等
常用壓縮工具: YUI Compressor. CSS Compressor
HTML 代 碼 壓 縮
不 建 議 使 用 代 碼 壓 縮 ， 有 時 會 破 壞 代 碼 結 構 ， 可 以 使 用 Gzip 壓 縮
當 然 也 可 以 使 用 htmlcompressor 工 具 ， 不 過 轉 換 后 一 定 要 檢 查 代
碼 結 構 。
圖 片 壓 縮
除 了 代 碼 的 壓 縮 外 ， 有 時 對 圖 片 的 壓 縮 也 是 很 有 必 要 ， 一 般 情 況 下
圖 片 在 Web 系 統 的 比 重 都 比 較 大 。
壓縮工具: tinypng. JpegMini. ImageOptim
Nginx配置壓縮
gzip on|off; //是否開啟gzip
gzip_buffers 32 4k|16 8k //緩沖(在內存中緩存幾塊，每塊多大 )
gzip_comp_level [1-9] #推薦6（壓縮級別，級別越大，越浪費cpu資源 ）
gzip_disable //正則匹配UA 什么樣的uri不進行gzip
gzip_min_length 200 # 開始壓縮的最小長度
gzip_http_version 1.0|1.1 //開始壓縮的http協議版本
gzip_proxied //設置請求者代理服務器，該如何緩存內容
gzip_types text/plain application/xml //對哪些類型的文件用壓縮(txt,xml,html,css)
gzip_vary onloff //是否傳輸gzip壓縮標志
其 他 工 具
自動化構建工具 Grunt
cdn加速
本 地 cache加 速 ， 提 高 了 企 業 站 點 （ 尤 其 含 有 大 量 圖 片 和 靜 態 頁 面 站
點 ） 的 訪 問 速 度 。
跨 運 營 商 的 網 絡 加 速 ， 保 證 不 同 網 絡 的 用 戶 都 得 到 良 好 的 訪 問 質 量
遠 程 訪 問 用 戶 根 據 DNS 負 載 均 衡 技 術 智 能 自 動 選 擇 cache服 務 器
場景
站 點 或 者 應 用 中 大 量 靜 態 資 源 的 加 速 分 發 ， 例 如 ：css,js,圖 片 和
HTML
大 文 件 下 載
直 播 網 站 等
實現
BAT的cdn服務，lvs4層負載均衡，Nginx七層負載均衡,使 用 squid 反 向 代 理 ， 或 者 Nginx 等 的 反 向 代 理
獨立圖片服務器
分 擔 Web 服 務 器 的 I / 0 負 載 · 將 耗 費 資 源 的 圖 片 服 務 分 離 出 來 ， 提 高 服 務 器 的 性 能 和 穩 定 性 。
能 夠 專 門 對 圖 片 服 務 器 進 行 優 化 · 為 圖 片 服 務 設 置 有 針 對 性 的 緩 存 方 案 ， 減 少 帶 寬 成 本 ， 提 高 訪 問 速 度 。
提 高 網 站 的 可 擴 展 性 ． 通 過 增 加 圖 片 服 務 器 ， 提 高 圖 片 吞 吐 能 力 。
采 用 獨 立 域 名
同一 域 名 下 瀏 覽 器 的 發 連 接 數 有 限 制 ，無法 突 破 瀏 覽 器 連 接 數 的 限 制 ，由於cookie的 原 因 ， 對 緩 存 不 利 ， 大 部 分 Web cache 都 只 緩 存 不 帶 cookie 的 請 求 , 導 致 每 次 的 圖 片 請 求 都 不 能 命 中chache。