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