簡介 優化是一個持續的過程。所以儘可能的不要有人為的參與。所以能自動化的或者能從架構、框架級別解決的就最更高級別解決。 這樣即能實現面對開發人員是透明的、不響應，又能確保所有資源都是被優化過的。 場景 1. 確保靜態資源是有緩存。 2. 確保靜態資源的大小最小。 3. 確保載入的資源最少。 4. 確 ...
簡介
優化是一個持續的過程。所以儘可能的不要有人為的參與。所以能自動化的或者能從架構、框架級別解決的就最更高級別解決。
這樣即能實現面對開發人員是透明的、不響應，又能確保所有資源都是被優化過的。
場景
- 確保靜態資源是有緩存。
- 確保靜態資源的大小最小。
- 確保載入的資源最少。
- 確保用戶以最短的時間看到頁面
- 減少人為因素的性能瓶頸。
解決方案
緩存
讓資源更可能快的讓用戶看到。
結合代理（nginx）來實現。給http添加緩存的時長。
# 需要緩存的靜態資源類型
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css|ico)$ {
....
if (-f $request_filename) {
expires 1d;
break;
}
}說明：
html文件的緩存，要根據具體業務來判斷。因為有些是真實的Html文件。有些是偽靜態，並沒有真的html文件
也可以通過cdn來緩存。
壓縮
通過自動化壓縮的工具來實現，儘量不要有人為的參與。這樣即能對開發是透明的，不增加複雜度，也能防止因為人為的因素的遺忘。
建議：glup的插件（jsmin，cssmin,imgmin）
按需載入
圖片載入延遲
所謂圖片延遲載入，就是每次只載入當前屏幕可見區域的圖片，其餘的圖片在用戶滾動頁面到該位置後才開始載入。這是一項非常實用的技術，減少了併發數，不但減少了伺服器的壓力，也降低了頁面的載入時間，目前很多門戶網站都使用了該技術，如騰訊微博的“看看推薦的人”頁面，在該頁面上有幾千個頭像，如果一次性載入全部的圖片，就要耗費比較多的客戶端和伺服器端的資源。該功能的實現原理很簡單，就是將頁面上的src替換成其他標記（如original），在頁面滾動到相應位置後，再將original更改為src。目前有個Jquery插件Jquery.LazyLoad.js可以實現圖片的延遲載入，而且這個方法也能減少請求數。
非同步載入
首屏為行，重要信息為先，次要信息非同步載入。
減少不必要的傳輸
動靜功能變數名稱分離。不傳輸cookie。有很多業務相關的cookie會通過http傳輸。比如登錄後的token等。
減少請求數
網路請求是很費時。即增加了伺服器壓力，也影響用戶使用的性能。
一般思路是通過合併來實現。
- 合併請求。結合代理(nginx)的模塊(concat)來實現。
- 合併資源。雪碧圖。這個也可以通過glup插件來實現。
加快渲染
image屬性設置
有時需要在頁面載入完之前，就對頁面佈局進行定位。
若頁面中的圖片沒指定尺寸，或尺寸與實際圖片大小不符，瀏覽器會在圖片下載完成後再"回溯"該圖片並重新顯示，從而浪費時間。
# 頁面的請求過程
...
12. 渲染樹一旦有結構模型了，接著就會同步去計算渲染樹節點的佈局位置
13. 一旦計算出來渲染的坐標後，又同步去開始渲染
14. 10-13步進行過程中如果遇到圖片則跳過去渲染下麵內容，等待圖片下載成功後會返回來在渲染
...所以，如果image如果沒有width和height的話，會影響性能。
js位置
js的載入方式是阻塞式的。放在最後，等頁面都渲染完了再載入。
減少嵌套層級
嵌套越深，document的構建越慢。
高性能的規範
比如說：
- 避免CSS表達式
- 避免過大的cssName
- 避免頻繁的DOM操作等。
...
也可以把上面的一些對性能有響應加到規範里，比如img標簽必須有width和height，不允許css import，嵌套不允許超過3級等等。具體還是要看前端的規範。最好能有一些自動檢驗規範的工具。比如csshint，或者自己寫一些小工具等。
驗證方法
- 谷歌瀏覽器的開發者工具（控制台）
- pagespeed
- yslow
- https://varvy.com/tools/css-delivery/
- Chrome Task Manager。能查看記憶體泄漏
