最近參加了兩次社招，發現社招面試都會問到效能優化以及框架原理。當中效能優化即使我知道好幾種，然而我面試時總是很容易想不起來，只答出了兩三種。因此，寫一篇部落格來對效能優化做一下研究，加深理解。
對於前端效能優化自然要關注首屏開啟速度，而這個速度，很大因素是花費在網路請求上，那麼怎麼減少網路請求的時間呢？
所以壓縮、合併就是乙個解決方案，當然可以用gulp、webpack、grunt等構建工具壓縮、合併。
使用webpack壓縮js：
plugins: [
new uglifyjsplugin(), //打包後檔案壓縮
]
mode: 'production'使用webpack壓縮css,
new optimizecssassetsplugin(,
// 避免 cssnano 重新計算 z-index
safe: true,
// cssnano 整合了autoprefixer的功能
// 會使用到autoprefixer進行無關字首的清理
// 關閉autoprefixer功能
// 使用postcss的autoprefixer功能
autoprefixer: false
},canprint: true
}),
http協商快取vs強快取
快取這東西，第一次必須獲取到資源後，然後根據返回的資訊來告訴如何快取資源，可能採用的是強快取，也可能告訴客戶端瀏覽器是協商快取，這都需要根據響應的header內容來決定的。
瀏覽器快取包含兩種型別，即強快取（也叫本地快取）和協商快取，瀏覽器在第一次請求發生後，再次請求時：
強快取與協商快取的區別，可以用下表來進行描述：
獲取資源形式狀態碼傳送請求到伺服器
強快取從快取取
200（from cache）
否，直接從快取取
協商快取從快取取
304（not modified）
是，正如其名，通過伺服器來告知快取是否可用
1）expires
當客戶端第一次訪問乙個檔案資源的時候，服務端在返回資源內容的同時也返回了：
expires: mon, 1 aug 2016 22:43:02 gmt下一次瀏覽器又要訪問這個資源，並且訪問的時間在mon, 1 aug 2016 22:43:02 gmt之前，那瀏覽器就不去伺服器那邊獲取檔案了，而是直接從快取中取檔案。
2）cache-control
由於expires給定的是絕對時間，而客戶端的系統時間可以由使用者任意修改，比如expires設定的過期時間是
mon, 1 aug 2016 22:43:02 gmttue, 2 aug 2016 22:43:02 gmtcache-control: max-age=80由於cache-control是http1.1中才有的，因此可能會有expires和cache-control同時出現的情況，這時以cache-control為準。
協商快取都是由伺服器來確定快取資源是否可用的，所以客戶端與伺服器端要通過某種標識來進行通訊，從而讓伺服器判斷請求資源是否可以快取訪問，這主要涉及到下面兩組header欄位，這兩組搭檔都是成對出現的，即第一次請求的響應頭帶上某個字段（last-modified或者etag），則後續請求則會帶上對應的請求字段（if-modified-since或者if-none-match），若響應頭沒有last-modified或者etag字段，則請求頭也不會有對應的字段。
1）last-modified/if-modified-since
2）etag/if-none-match
這兩個值是由伺服器生成的每個資源的唯一標識字串，只要資源有變化就這個值就會改變；其判斷過程與last-modified/if-modified-since類似，與last-modified不一樣的是，當伺服器返回304 not modified的響應時，由於etag重新生成過，response header中還會把這個etag返回，即使這個etag跟之前的沒有變化。
last-modified與etag是可以一起使用的，伺服器會優先驗證etag，一致的情況下，才會繼續比對last-modified，最後才決定是否返回304。
前端小遊戲頁面效能優化
公司是做教育類遊戲開發，以前是用flash製作，現在開始使用createjs框架開發canvas遊戲。今天突然收到乙個任務 遊戲在ipad2下面遊戲會打不開，然後自動重新整理，再載入不出來，然後再重新整理，陷入了死迴圈 通過度娘得知此問題是由越獄或記憶體引起的。排除越獄可能 因為沒有越獄 剩下就是記...
前端頁面效能優化的幾種方式
本文最初發表於，並在github上持續更新前端的系列文章。歡迎在github上關注我，一起入門和高階前端。以下是正文。提公升頁面效能優化的常見方式 快取是所有效能優化的方式中最重要的一步 重要 有的人可能會回答local storage 和session storage，其實不是這個。瀏覽器快取和儲...
前端 頁面效能
提公升頁面效能的方法？非核心 非同步載入 非同步載入的方式 非同步載入的區別 利用瀏覽器快取 快取的分類 快取的原理 使用cdn 網路優先 本質上是乙個快取，將資料快取在離使用者最近的地方，一般快取的是靜態資源 將css放在頁面最上面，將js放在頁面最下面 頁面從上到下載入 把js和css提取出來放...