前端開發(fā)性能優(yōu)化規(guī)范
成都全搜索前端開發(fā)性能優(yōu)化規(guī)范網(wǎng)站性能優(yōu)化是一個很綜合的話題，涉及到服務器的配置和網(wǎng)站前后端程序等各個方面，前端開發(fā)組以yahoo 的yslow 提高網(wǎng)頁效率的14條準則和google 的page s
成都全搜索前端開發(fā)性能優(yōu)化規(guī)范
網(wǎng)站性能優(yōu)化是一個很綜合的話題，涉及到服務器的配置和網(wǎng)站前后端程序等各個方面，前端開發(fā)組以yahoo 的yslow 提高網(wǎng)頁效率的14條準則和google 的page speed 為理論基礎，結(jié)合自身的實際情況初步制定出成都全搜索前端開發(fā)性能優(yōu)化規(guī)范，望大家在開發(fā)中遵循以下規(guī)范優(yōu)化性能。
傳輸優(yōu)化
第一條：Make Fewer HTTP Requests 盡可能的減少HTTP 的Request 請求數(shù)。 終端用戶響應的時間中，有80用于下載各項內(nèi)容。這部分時間包括下載頁面中的圖像、樣式表、腳本、Flash 等。通過減少頁面中的元素可以減少HTTP 請求的次數(shù)。這是提高網(wǎng)頁速度的關(guān)鍵步驟。
減少HTTP 請求的方法包括：合并Javascript/CSS文件、使用CSS Sprites(合并背景圖片) 。
其中綠色的為傳輸文件花費的Reveive 時間，而前面白色的為檢索緩存和確認鏈接是否有效的Blocked 時間。老版本的IE 和Firefox 都使用較低的單個主機并發(fā)連接數(shù)（2），而新版本的IE 和Firefox 都使用較高的單個主機并發(fā)連接數(shù)（6），所以除了正在下載的文件外其他的HTTP 請求都要排隊，請求越多Blocked 的時間就越長。
IE7 2
,IE8 6
Firefox2
Firefox3 2 6 network.http.max-persistent-connections-per-server:6 盡量減少HTTP 的Request 請求。
1. CSS Sprites(合并背景圖片), 最有效的方法
CSS Sprites ：簡單的說就是利用CSS 的background-position 屬性，控制一張背景圖片的顯示區(qū)域。把能合并在一起的背景圖片都合并到一張圖上。如下圖：
將20個單獨的背景圖片合并成一張背景圖，相當于把20個HTTP 請求減小為1個HTTP 請求。
2. 合并css 文件
為了方便組織和規(guī)劃樣式表，將用于不同用途的樣式表文件分離開來，形成不同的css 文件。采用兩套版本，編輯版和發(fā)布版。編輯版仍然使用多個css 文件以便于規(guī)劃和組織。而等到發(fā)布的時候，再將多個css 文件合并到一個文件中去，從而達到減少HTTPRequest 請求數(shù)的目的。
3. 合并js 文件
原因和處理方法同上。
,第二條：Reduce DNS Lookups 減少DNS 查詢
域名系統(tǒng)（DNS ）提供了域名和IP 的對應關(guān)系，就像電話本中人名和他們的電話號碼的關(guān)系一樣。當你在瀏覽器地址欄中輸入www.cdqss.com 時，DNS 解析服務器就會返回這個域名對應的IP 地址。DNS 解析的過程同樣也是需要時間的。一般情況下返回給定域名對應的IP 地址會花費20到120毫 秒的時間。而且在這個過程中瀏覽器什么都不會做直到DNS 查找完畢。
真正意義上的指導其實有兩條：
1：如果不是必須，請不要把網(wǎng)站放到兩臺服務器上。
2：網(wǎng)頁中的圖片、css 文件、js 文件、flash 文件等等，不要太多的分散在不同的網(wǎng)絡空間中（經(jīng)過測試現(xiàn)階段適合我們的是使用4個圖片服務器）。
第三條：Gzip Components 啟用Gzip 壓縮
Gzip 的思想就是把文件先在服務器端進行壓縮，然后再傳輸。這對于體積較大的純文字型的文件有效果明顯。
從HTTP/1.1開始，web 客戶端都默認支持HTTP 請求中有Accept-Encoding 文件頭的壓縮格式：
Accept-Encoding: gzip, deflate
如果web 服務器在請求的文件頭中檢測到上面的代碼，就會以客戶端列出的方式壓縮響應內(nèi)容。Web 服務器把壓縮方式通過響應文件頭中的Content-Encoding 來返回給瀏覽器。 Content-Encoding: gzip
Gzip 大概可以減少70的響應規(guī)模。
圖像和PDF 文件由于已經(jīng)壓縮過了所以不能再進行g(shù)zip 壓縮。如果試圖gizp 壓縮這些文件的話不但會浪費CPU 資源還會增加文件的大小。
,第四條：使用GBK 編碼
GBK 的文字編碼是雙字節(jié)來表示的，即不論中、英文字符均使用雙字節(jié)來表示，只不過為區(qū)分中文，將其最高位都定成1。UTF －8編碼則是用以解決國際上字符的一種多字節(jié)編碼，它對英文使用8位（即一個字節(jié)），中文使用24位（三個字節(jié)）來編碼。對中文字符GBK 能節(jié)省空間。
第五條：Use a Content Delivery Network 使用CDN
YSlow 的官方解釋是：用戶與你網(wǎng)站服務器的接近程度會影響響應時間的長短。把你的網(wǎng)站內(nèi)容分散到多個、處于不同地域位置的服務器上可以加快下載速度。
結(jié)合中國的網(wǎng)絡特色，這個便不難理解了?！氨狈椒掌鳌薄ⅰ澳戏椒掌鳌?、“電信服務器”、“網(wǎng)通服務器”……這些詞聽起來是那么熟悉。如果，一個北京的電信用戶試圖從廣東的網(wǎng)通服務器上打開一個類似《壁紙合集》帖子的網(wǎng)頁時，你就能很深刻的理解。
鑒于這個不是我們開發(fā)人員力所能及的準則，所以這里也就不多言了。
第六條：Avoid Redirects 避免跳轉(zhuǎn)
跳轉(zhuǎn)會降低用戶體驗。在用戶和HTML 文檔中間增加一個跳轉(zhuǎn)，會拖延頁面中所有元素的顯示，因為在HTML 文件被加載前任何文件（圖像、Flash 等）都不會被下載。
鏈接地址寫明確。例如:將http://www.cdqss.com/寫成http://www.cdqss.com （注意最后面一個“/”符號）。這兩個網(wǎng)址都能訪問到，但是，它們是有區(qū)別的。http://www.cdqss.com會被重新指向http://www.cdqss.com/ 。顯然，中間多一次加載
,時間。
第七條：Minify JavaScript and CSS 減少JavaScript 和CSS 文件的體積
最終發(fā)布版本中把沒有必要的空行、空格和注釋全部去掉。
第八條：減少HTTP 404 (文件未找到)
HTTP 請求時間消耗是很大的，因此使用HTTP 請求來獲得一個沒有用處的響應（例如404沒有找到頁面）是完全沒有必要的，它只會降低用戶體驗而不會有一點好處。
第九條：使用GET 方式發(fā)送AJAX 請求
Yahoo!Mail 團隊發(fā)現(xiàn)，當使用 XMLHttpRequest 時，瀏覽器中的POST 方法是一個“兩步走”的過程：首先發(fā)送文件頭，然后才發(fā)送數(shù)據(jù)。因此使用GET 最為恰當，因為它只需 發(fā)送一個TCP 包(除非你有很多cookie) 。IE 中URL 的最大長度為2K ，因此如果你要發(fā)送一個超過2K 的數(shù)據(jù)時就不能使用GET 了。
一個有趣的不同就是POST 并不像GET 那樣實際發(fā)送數(shù)據(jù)。根據(jù)HTTP 規(guī)范，GET 意味著“獲取”數(shù)據(jù)，因此當你僅僅獲取數(shù)據(jù)時使用GET 更加有意義(從語意上講也是如此) ，相反，發(fā)送并在服務端保存數(shù)據(jù)時使用POST 。
避免阻塞
第一條：Put CSS at the Top 把CSS 樣式放在頁面的上方
把樣式表放到文檔的