前言：
這算是對前端優化的總結吧，之前零零星星總結和學習，這次做一個完整的總結。
測試網頁性能工具
⑴Page Speed：
谷歌開發的工具，網站管理者和網絡開發人員可以使用 Page Speed 來評估他們網頁的性能，并獲得有關如何改進性能的建議。
⑵yslow：
YSlow可以對網站的頁面進行分析，并告訴你為了提高網站性能，如何基于某些規則而進行優化。
安裝方法：
安裝：yslow直接在firefox元件查找，安裝即可
Page Speed安裝，使用火狐點開http://code.google.com/speed/page-speed/download.html，點選下載下傳，火狐會自動安裝
使用方法：
1）pagespeed的使用
這裡是如何解釋的顔色代碼分數：
· 高優先級。這些建議代表了最大的潛在的性能赢得。你應該首先解決這些項目。
· 中等優先級。這些建議可能代表較小的勝或更多的工作來實作。您應該解決這些項目的未來。
· 工作罰款或低優先級。如果顯示建議，作為與“+”号表示，他們很可能代表未成年人勝。您應該隻關注這些項目後，你處理的優先級較高的的。
· 隻有資訊的消息。無論這些項目不适用此頁或有一個問題，在運作測試。
關于它的使用更詳細的資料參考：http://code.google.com/intl/zh-CN/speed/page-speed/docs/using_firefox.html
2）Yslow的使用
視圖顯示了等級為網頁的成績單。整個字母等級為頁面顯示在頂部随着全面數值的表現。這個頁面是基于22可分級的高性能網頁的規則(見性能規則)。這些規則是列在按重要性的順序,從最重要不重要。從 A 級到 F 級，A 級為最高。更詳細的使用方法參考：http://www.yslow.net/show.php?tid=123
網站性能最佳慣例和規則
網站優化的原則是什麼呢？這裡推薦雅虎的23條網站優化軍規
雅虎的卓越性能團隊已經确定了23個軍規：
1. 減少HTTP請求次數
合并圖檔、CSS、JS，改進首次通路使用者等待時間。
2. 使用CDN
就近緩存==>智能路由==>負載均衡==>WSA全站動态加速
3. 避免空的src和href
當link标簽的href屬性為空、script标簽的src屬性為空的時候，浏覽器渲染的時候會把目前頁面的URL作為它們的屬性值，進而把頁面的内容加載進來作為它們的值。測試
4. 為檔案頭指定Expires
使内容具有緩存性。避免了接下來的頁面通路中不必要的HTTP請求。
5. 使用gzip壓縮内容
壓縮任何一個文本類型的響應，包括XML和JSON，都是值得的。舊文章
6. 把CSS放到頂部
7. 把JS放到底部
防止js加載對之後資源造成阻塞。
8. 避免使用CSS表達式
9. 将CSS和JS放到外部檔案中
目的是緩存，但有時候為了減少請求，也會直接寫到頁面裡，需根據PV和IP的比例權衡。
10. 權衡DNS查找次數
減少主機名可以節省響應時間。但同時，需要注意，減少主機會減少頁面中并行下載下傳的數量。
IE浏覽器在同一時刻隻能從同一域名下載下傳兩個檔案。當在一個頁面顯示多張圖檔時，IE 使用者的圖檔下載下傳速度就會受到影響。是以新浪會搞N個二級域名來放圖檔。
11. 精簡CSS和JS
12. 避免跳轉
同域：注意避免反斜杠 “/” 的跳轉；
跨域：使用Alias或者mod_rewirte建立CNAME（儲存域名與域名之間關系的DNS記錄）
13. 删除重複的JS和CSS
重複調用腳本，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存，它們都存在重複運算JavaScript的問題。
14. 配置ETags
它用來判斷浏覽器緩存裡的元素是否和原來伺服器上的一緻。比last-modified date更具有彈性，例如某個檔案在1秒内修改了10次，Etag可以綜合Inode(檔案的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime隻能精确到秒的問題。 伺服器叢集使用，可取後兩個參數。使用ETags減少Web應用帶寬和負載
15. 可緩存的AJAX
“異步”并不意味着“即時”：Ajax并不能保證使用者不會在等待異步的JavaScript和XML響應上花費時間。
16. 使用GET來完成AJAX請求
當使用XMLHttpRequest時，浏覽器中的POST方法是一個“兩步走”的過程：首先發送檔案頭，然後才發送資料。是以使用GET擷取資料時更加有意義。
17. 減少DOM元素數量
是否存在一個是更貼切的标簽可以使用？人生不僅僅是DIV+CSS
18. 避免404
有些站點把404錯誤響應頁面改為“你是不是要找***”，這雖然改進了使用者體驗但是同樣也會浪費伺服器資源（如資料庫等）。最糟糕的情況是指向外部 JavaScript的連結出現問題并傳回404代碼。首先，這種加載會破壞并行加載；其次浏覽器會把試圖在傳回的404響應内容中找到可能有用的部分當作JavaScript代碼來執行。
19. 減少Cookie的大小
20. 使用無cookie的域
比如圖檔 CSS 等，Yahoo! 的靜态檔案都在 yimg.com 上，用戶端請求靜态檔案的時候，減少了 Cookie 的反複傳輸對主域名 (yahoo.com) 的影響。
21. 不要使用濾鏡
png24的在IE6半透明那種東西，别亂使，淡定的切成PNG8+jpg
22. 不要在HTML中縮放圖檔
23. 縮小favicon.ico并緩存
比較牛逼和權威的解釋資料
關于這個些規定，前人對的最權威最詳細的解釋Best Practices for Speeding Up Your Web Site和Web Performance Best Practices
百度的泛體驗中心也有一篇針對其中加載部分的優化文章：http://www.baiduux.com/blog/2011/02/15/browser-loading/
**************************************上面三篇文章看完基本上頁面優化就沒有什麼難點了。
解決問題
通過上面的工具測試，可以檢查出網頁前端的以小額問題，而針對問題就需要你一個個解決，下面是我解決我網站存在問題的一個記錄，大家可以權作參考《網站優化--讓你的網頁飛起來》
另外一些問題
上面的全部做完是否就可以上線了呢？這裡還有一些小問題需要注意：
- 用了Google分析等統計工具了嗎？（國内可以使用百度統計或cnzz統計）
你應該跟蹤每個頁面的通路情況，哪些受歡迎，哪些掙得錢多，下面是我使用百度統計的一個頁面熱力圖：通過熱力點可以分析出使用者習慣點選頁面那些地方！
- 有網站地圖（sitemap.xml）檔案嗎？
搜尋引擎可以發現網站所有頁面，但網站地圖可以給搜尋引擎指路，并告訴它們頁面的權重，下面是部落格園的網站地圖
。
在多個浏覽器下測試過嗎？
你可以通過browsershots.org檢查你的網站是否在所有浏覽器下都順眼。
這裡有一篇文章總結的小問題很好，大家可以看一下：網站上線之前需要檢查的13個問題
網站實時監控
國外使用者可以使用Siteuptime.com/Pingdom.com，國内使用者可以使用監控寶，下面是我的監控：
現在監控寶又支援伺服器性能的監控和webserver的監控以及使用者體驗的跟蹤，如下面截圖：
支援多種監控和多種類型，每15分鐘監控一次.實時幫助你監控自己的網站。
總結