主要圍繞這篇博客吸耿，解析不清楚的地方
一、服務(wù)器緩存
使用緩存可以減少向服務(wù)器的請求數(shù)伴网，節(jié)省加載時間妆棒，所以所有靜態(tài)資源都要在服務(wù)器端設(shè)置緩存，并且盡量使用長Cache（長Cache資源的更新可使用時間戳）
如靜態(tài)內(nèi)容或者更新不頻繁的的動態(tài)內(nèi)容动分，如果緩存下來红选，下次Web服務(wù)器便可以在下次收到請求后立即拿出緩存好的響應(yīng)結(jié)果內(nèi)容返回給瀏覽器
1. Expires文件頭：
ExpiresDefault "access plus 10 years"
如果使用了Expires文件頭，當(dāng)頁面內(nèi)容改變時就必須改變內(nèi)容的文件名玛瘸。內(nèi)容的文件名中加上版本號苟蹈，如 test_1.0.9.js。
2.ETags
- Entity tags（ETags）（實體標簽）是web服務(wù)器和瀏覽器用于判斷瀏覽器緩存中的內(nèi)容和服務(wù)器中的原始內(nèi)容是否匹配的一種機制（"實體"就是所說的"內(nèi)容"慧脱，包括圖片菱鸥、腳本、樣式表等）
- 原始服務(wù)器通過含有ETag文件頭的響應(yīng)指定頁面內(nèi)容的ETag
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
- 如果瀏覽器要驗證一個文件氮采，它會使用If-None-Match文件頭來把ETag傳回給原始服務(wù)器
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "10c24bc-4ab-457e1c1f"
- 如果ETag匹配鹊漠，就會返回一個304狀態(tài)碼茶行，這就節(jié)省了12195字節(jié)的響應(yīng)
HTTP/1.1 304 Not Modified
如果沒有使用ETag提供的靈活的驗證模式登钥，那么干脆把所有的ETag都去掉會更好
二、Gzip
- 壓縮所有可能的文件類型可以減少文件體積
- web客戶端都默認支持HTTP請求中有Accept-Encoding文件頭的壓縮格式：
Accept-Encoding: gzip, deflate - Web服務(wù)器把壓縮方式通過響應(yīng)文件頭中的Content-Encoding來返回給瀏覽器
Content-Encoding: gzip Gzip
三看锉、盡早刷新輸出緩沖
- 把已經(jīng)編譯的好的部分HTML響應(yīng)文件先發(fā)送給瀏覽器塔鳍，這時瀏覽器就會可以下載文件中的內(nèi)容（腳本等）而后臺同時處理剩余的HTML頁面
四、LazyLoad
- Lazy Load 是一個用 JavaScript 編寫的 jQuery 插件. 它可以延遲加載長頁面中的圖片. 在瀏覽器可視區(qū)域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置. 這與圖片預(yù)加載的處理方式正好是相反的.
五、Media Query
- 直譯——“媒體查詢”
- 有例子：
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
六蜡感、Srcset
- 根據(jù)屏幕密度現(xiàn)實對應(yīng)尺寸圖片
七恃泪、避免使用DataURL
- 圖片數(shù)據(jù)以base64字符串格式嵌入到了頁面中
<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGXElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgdLbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wnk2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbFZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">
八、使用classList代替className
- 在HTML5 API里情连，頁面DOM里的每個節(jié)點上都有一個classList
對象览效，程序員可以使用里面的方法新增、刪除锤灿、修改節(jié)點上的CSS類
九但校、TOUCH事件優(yōu)化
- 使用touchstart、touchend代替click状囱，因快影響速度快。但應(yīng)注意Touch響應(yīng)過快袭艺，易引發(fā)誤操作
十叨粘、動畫優(yōu)化
- 盡量使用CSS3動畫
- 合理使用requestAnimationFrame動畫代替setTimeout
- 適當(dāng)使用Canvas動畫 5個元素以內(nèi)使用css動畫门坷，5個以上使用Canvas動畫（iOS8可使用webGL）
十一袍镀、疑問
- 高頻事件優(yōu)化
- GPU加速
Reference
淺談Web緩存
Web程序優(yōu)化的最佳實踐（服務(wù)器篇）
Lazy Load
Media Query
Srcset
dataUrl
classList
requestAnimationFrame
