一. HTTP優化
1. 減少HTTP請求
- 合併文件，例如css代碼和js代碼分別合併到一個css文件和js文件中;
- 使用css sprite，詳細請參考css優化中的css sprite部分。
- 使用base64技術
2. 重定向優化
- 消除沒必要的跳轉
- 利用服務器重寫用戶鍵入的鏈接
- 使用HTTP而不是js或者meta來重定向
3. 避免死鏈/空鏈/404/410錯誤
- 避免出現404 Not Found錯誤
- 避免出現圖片請求空鏈接（img.src=””）
4. 儘早flush buffer
儘早的使用flush buffer可以讓一部分內容先加載出來，提高用戶體驗。
5. http中的character設置
指定content-type和正確的character編碼
二. 緩存優化
1. 瀏覽器緩存
添加 Expires 或 Cache-Control 頭
- 對於靜態資源：通過設置一個很遠的過期時間來實現“從不過期”
-
對於動態資源：用一個適當的 Cache-Control 頭來幫助瀏覽器控制請求
瀏覽器利用緩存來減少http請求的數目和大小，讓頁面加載的更快。web服務器利用http響應中的Expires頭來告訴客戶端一個資源能夠被緩存多久。
需要注意的是，如果你利用了一個“不過期”的Expires頭，你必須在資源改變的同時改變資源的名字。這一技術提高頁面性能是基於用戶已經訪問過你的網站的基礎之上的。
-
設置Last-Modified日期爲最近資源需要改變的時間。
對動態可用緩存使用“身份識別”
通過鏈接到資源的唯一url（每次改變資源時同時改變其文件名）來改變緩存
爲IE設置Vary的header
避免firefox中URL造成的緩存衝突
firefox通過hash表存儲url的緩存，但hash值僅僅有8個字符，可能會造成hash衝突，所以你需要確保你的資源urldiff多於8字符邊界。
2. 代理服務器(靜態資源服務器)緩存
利用Cache-control：public的頭可以讓資源緩存在一個web代理服務器上面來讓其他用戶使用。
-
不要在靜態資源的url上面添加查詢字符串
-
不用在代理服務器上緩存設置了cookie的資源
-
要有使用代理緩存js和css文件的意識
三. DNS
1. 減小DNS解析
1.固定URL提供資源 2.儘可能的使用URL路徑來代替主機域名，例如developer.example.com可以被www.example.com/developer代替。除非有技術上的原因需要不同的主機域名。 3.將從同一主機域名下的需要先加載的js文件作爲主要文件送達 4.考慮使用DNS預解析
2. 增加靜態資源域名
實現多個資源的並行下載
四. 服務器負載優化
1. 使用CND
CDN可以幫助用戶更快的獲取到所需要的資源。
2. Cookie優化
1.使用服務器端的存儲爲大多數的cookie來做有效載荷：在cookie裏存key，在服務器端存value。 2.移除沒有用的或者重複的cookie 3.靜態資源請求中不要帶上cookie 4.不要將需要提前加載的js放到沒有cookie的域中加載
3. 使用Gzip
Gzip是當前最流行，最有效的壓縮方式。
1.在http/1.1中，web客戶端明確支持在http請求中 Accept-Encoding 頭 的 Accept-Encoding: gzip, deflate 壓縮方式 2.Gzip一般能減少服務器響應文件70%的大小，90%的瀏覽器都支持gzip 3.服務器基於文件類型來選擇gzip壓縮，很多網站gzip他們的html文件，同樣也可以gzip腳本和樣式表 4.事實上，任何的響應文本，包括xml和json都有壓縮的價值，圖片和pdf文件不應該被gizp，因爲他們已經被壓縮過了
4. 壓縮文件
壓縮包括：Javascript、CSS、HTML
讓你寫的頁面能夠更有效的壓縮： 1.按照字母排序指定css鍵對值 2.按照字母排序指定html屬性 3.對html屬性使用一致的引號 4.使用一致的字母（小寫字母） 5.移除沒有用到的css
五. CSS相關優化
1. 樣式表合併放頭部
1.將樣式表移到文件的Head可以讓頁面加載的更快，這是因爲將樣式表放在頭部有利於頁面渲染。 2.將樣式表放在底部的問題是它阻止了許多瀏覽器的渲染進度。這些瀏覽器會鎖定渲染進程來保證頁面上的元素在他們的樣式改變時重繪。
2. css編碼要點
具體參看性能相關編碼規範中的css編碼規範
3. 使用css Sprite
1.將圖片水平放置在sprite中可以讓文件大小更小。 2.對一起加載的圖片使用sprite 3.GIF和PNG圖片優先使用sprite 4.小圖片優先sprite 5.可緩存的圖片使用sprite 6.使用sprite工具 7.儘量減少sprite圖片中的空白空間 8.將色彩範圍相近的圖片進行sprite
4. 外聯css
利用瀏覽器緩存，將一些公共的css進行外鏈，使用緩存，加快用戶第一次以後訪問頁面的速度
六. Javascript相關優化
1. js文件放底部
這一問題的原因是腳本是並行阻塞下載的。HTTP/1.1協議中建議瀏覽器不在同一域名下並行下載多於兩個的資源。假如你的圖片是在多個域名下的，你可以並行下載超過兩張的圖片。可是一個腳本在下載的時候，瀏覽器不能再開始其他的下載，即使在不同的域名下。
一個可供採納的建議是利用延遲加載腳本技術（defer）。這是一種可以讓瀏覽器繼續渲染的方案。不幸的是，fireforx不支持defer屬性。
2. js代碼去重
1.將重複的js代碼去掉 2.將沒有使用過的變量去掉 3.將沒有調用到的函數去掉
3. 無阻塞下載腳本
幾種下載外部腳本且不被阻塞的技術
- XHR Eval：通過XMLHttpRequest從服務器端獲取腳本，響應完成時通過eval執行內容。缺陷：不能跨域。
- XHR 注入：通過XMLHttpRequest從服務器端獲取腳本，響應完成時通過創建script元素注入其中執行內容。缺陷：不能跨域。
- Script in Iframe：通過iframe的src屬性加載腳本。
- Script DOM Element：通過創建script標籤元素來加載腳本。
- Script Defer：IE特有
- document.write Script Tag：通過把script標籤代碼用write方法放到頁面中加載腳本。
4. 外聯js和行內js
1.將外聯腳本放在外聯樣式表之後 2.將行內腳本放在其他資源之後
5. js編碼要點
詳細請參看前端性能優化相關編碼規範：js編碼規範
七. 圖片相關優化
- 圖片壓縮：在條件允許的情況下儘量使用PNG8格式
- 圖片合併：詳見CSS sprite
- 圖片縮放：服務器端進行圖片縮放
八. 其他優化
- 減少頁面DOM元素
- 延遲加載和預加載資源
- 將Get作爲Ajax請求的方法
- 儘量不要使用iframe：