開篇語 作為一個前端的菜鳥，總是在面試的時候被問及一些優化的問題，說實話，回答的時候總是心虛，因為確實沒有真真正正做過優化對比，也不知道從何說起，今天在網上收集一些例子加以總結，日後若是開發用到，也能一一對照，把自己開發的網站做到最優化！ 網站優化 一個網站的優化，前端只是很小的一部分。大到系統架構 ...
開篇語
作為一個前端的菜鳥，總是在面試的時候被問及一些優化的問題，說實話，回答的時候總是心虛，因為確實沒有真真正正做過優化對比，也不知道從何說起，今天在網上收集一些例子加以總結，日後若是開發用到，也能一一對照，把自己開發的網站做到最優化！
網站優化
一個網站的優化，前端只是很小的一部分。大到系統架構，小到頁面HTML佈局，無一不影響這一個網站的用戶體驗。由於現在知識面還比較窄，對架構方面的優化（伺服器集群、業務分離、NOSQL、資料庫設計、緩存設置、單點登錄）理解不全面，本篇就先只總結前端的一些優化技巧，有不全或者不對的地方，還請各位留言指正，大神勿噴哦，小弟學習也不容易呢，O(∩_∩)O！
前端優化條例：（雅虎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並緩存
總結：以上每一條優化方式，網上都有相應的操作方法，個人覺的是在開發前熟記軍規，避免二次開發。當然特殊情況除外，燒銀子的優化得看自身情況嘍！
測試篇：
智者千慮必有一失，膨大的項目開發完畢，避免不了會有疏忽的地方。這時我們需要通過一些測試工具進行專業性的測試，測試後再對症下藥，做到力所能及的最大優化！
1、YSlow：YSlow是yahoo美國開發的一個頁面評分插件，非常的棒，從中我們可以看出我們頁面上的很多不足，並且可以知道我們改怎麼卻改進和優化。
YSlow使用方式：
http://lusongsong.com/reed/362.html
YSlow跌評分規則：
（1）http://www.blueidea.com/tech/web/2008/6133.asp
（2）http://www.blueidea.com/tech/web/2008/6133_2.asp
2、Fiddler：Fiddler的功能很強大，它不僅可以查看HTTP的通信信息，也可以進行分析，從而發現通信過程中的問題，為優化網站頁面和提高性能提供依據。
Fiddler優化案例：
http://www.cnblogs.com/lerit/archive/2010/11/03/1867898.html
總結：
感覺網站就像一個人一樣，開發者作為父母，在塑造階段就應考慮好給他一個健全的體魄，倘若迫不得已不能返工重建，至少我們應該帶他去看病檢測，以方便知道他哪裡不舒服，好對症下藥。總之，盡自己的所能塑造一個完美的個體，才能不辱使命說自己是一個合格的“造物者”！
