前端效能優化主要從兩個方面進行：
1.載入頁面和靜態資源；
2.頁面渲染；
載入頁面和靜態資源主要可以從三個角度進行：
靜態資源的合併、壓縮
靜態資源快取（css、img）
使用cdn讓靜態資源載入更快
我們乙個乙個仔細展開說。
靜態資源的合併和壓縮能夠減少http請求的數量和請求資源的大小。
可以使用webpack或fis3進行。以fis3為例：
// 清除其他配置，只保留如下配置
fis.match('*.js', );
fis.match('*.css', );
fis.match('*.png', );
上面就是壓縮資源的配置檔案。
瀏覽器快取的分類：
1）強制快取：快取資源未過有效期則不需要請求資源。http首部字段利用catch-control,expires設定快取過期時間.
expires：
expires: thu, 10 nov 2017 08:45:11 gmt
這個字段表示的是快取到期時間
絕對時間，即伺服器時間。瀏覽器會檢查當前時間，如果還沒有到失效時間，則會直接使用快取檔案。但是因為這個欄位中使用的是絕對時間，可能出現客戶端與伺服器時間不同的情況，而且客戶端使用者可以自己修改時間。
catch-control
cache-control: max-age=2592000
這個字段表示的也是過期時間，以上面為例就是2592000s後過期。但是它用的是相對時間，即使客戶端時間改變，相對時間也不會隨之改變，這確保伺服器和客戶端的時間一致性。
2）對比快取：從快取中獲取對應的資料標識，然後向伺服器傳送請求，確認資料是否更新，如果已經更新，則返回新資料和新快取，如果沒有更新，則返回304狀態碼，通知客戶端快取未更新，可以使用快取。通過http的last-modified,etag欄位判斷。對比快取和強制快取相比，更加適合於一些經常要更新的資源檔案。
last-modified:
last-modified: thu, 10 nov 2015 08:45:11 gmt
第一次請求資源時，伺服器返回最後一次更新資源時間。瀏覽器下一次請求資源時，就會傳送if-modified-since欄位。
if-modified-since：再次請求時，請求頭中帶有該欄位，伺服器會將if-modified-since的值與last-modified欄位進行對比，如果相等，則表示未修改，響應304，讓瀏覽器利用快取；反之，則表示修改了，快取過期，響應200狀態碼，返回資料。
這個字段可以和cache-control配合使用。
但是他還是有一定缺陷的：
如果資源更新的速度是秒以下單位，那麼該快取是不能被使用的，因為它的時間單位最低是秒。
如果檔案是通過伺服器動態生成的，那麼該方法的更新時間永遠是生成的時間，儘管檔案可能沒有變化，所以起不到快取的作用。
etag
etag儲存的是資源的實體標識(一般都是hash生成的，雜湊字串)，伺服器儲存著檔案的etag欄位，當資源內容更新的時候，etag會變。伺服器可以在與每次客戶端傳送if-no-match的字段進行比較，如果相等，則表示未修改，響應304；反之，則表示已修改，響應200狀態碼，返回新資源。
下面是開啟了segmentfault上的乙個網頁，然後重新重新整理頁面的情況。
在不同地域的使用者請求資源（訪問**）的響應速度具有很大的差異，為了提高使用者體驗，我們在使用者和伺服器中間加了一層，就是cdn。cdn（content delivery network），它的思想就是將源站的內容分發到最接近使用者的網路邊緣節點，讓使用者能夠就近取得所需的內容，提高使用者訪問的響應速度。
當使用者發起http請求時，通過cdn向邊緣節點伺服器發起請求，邊緣節點會檢測當前節點是否具有你想請求的資料，如果沒有就去源站，如果有請求資料就會進一步判斷，這個資料是否在有效期，根據是否過期來決定。
前端效能優化 資源預載入
預載入是瀏覽器對將來可能被使用資源的一種暗示，一些資源可以在當前頁面使用到，一些可能在將來的某些頁面中被使用。作為開發人員，我們比瀏覽器更加了解我們的應用，所以我們可以對我們的核心資源使用該技術。預載入可以拆分成很多小點 dns prefetch,subresource,prefetch,preco...
前端效能優化 資源預載入
預載入是瀏覽器對將來可能被使用資源的一種暗示，一些資源可以在當前頁面使用到，一些可能在將來的某些頁面中被使用。作為開發人員，我們比瀏覽器更加了解我們的 應用，所以我們可以對我們核心資源使用該技術。當提到前端效能優化時，我們首先會聯想到檔案的合併，壓縮，檔案快取和開啟服務端的gzip壓縮等，這使得頁面...
前端優化（靜態資源）
expires 我現在給部落格裡所有的靜態資源設定了35天的快取過期時間，設定後感覺頁面的載入速度的確快了，我伺服器前端使用的是nginx，nginx設定資源檔案的expires挺簡單的 expire引數接受的值可以是 expires 1 january,1970,00 00 01 gmt 設定到具...