使用者體驗技術最佳化系列（一）

使用者體驗技術最佳化系列一）

                                        -----前端最佳化之減少http請數數

繼上個季度總結了富用戶端開發技術選型後，轉眼又過去三個月了，愛吼網又在經曆三個月的磨練。如果技術路線選型是方向、是戰略，那麼具體的技術實現的技巧就是戰術了，作為一個自主運營的網站產品來說，方向和戰略固然重要，但戰術則是致勝點，因為無數先烈已經給我們後來人證明了這點。

產品研發不同於項目研發，項目研發只需要把功能做好，搞定客戶，按照功能規格說明完成驗收就可以了。但做產品，尤其是互連網的產品，首先要研究的是商業模式和盈利模式，其次做出的產品要能夠快速搶佔市場，而研發的視角也必須要轉到以使用者為中心上來，需要的是如何吸引使用者？如何留住使用者？如何讓使用者掏錢？所以很自然的，研發的重點就是如何提升使用者體驗 。

那麼，什麼是使用者體驗？如何做好用體驗呢？中國互連網最大的產品經理，“企鵝號”航空母艦的掌門人小馬哥，已經通過案例，從產品設計的角度很好地剖析什麼是使用者體驗，以及如何來提高。可以稱得上是互連網產品設計的開山之作，非常值得產品經理們認真的學習下。我這裡要總結是從技術實現最佳化的角度來如何提高使用者體驗。系列之一就是，提高網站開啟速度。

沒有人願意等待。Google研究表明，網頁開啟的最佳速度是2秒，使用者能夠忍受的等待時間在6~8秒，超過12秒以上，頁面還沒開啟，99%的使用者不再等待。在同等網路、硬體資源的情況下，影響網站開啟的速度自然主要的就是網頁的http請求數了，所以最佳化的重點就是如何減少http請求數？

首先，有兩個概念必須先搞清楚，一是iis的並發路數，有的稱為iis的請求數，它是服務端，也就是web伺服器處理能力的一個重要指標，指的是瀏覽器與服務端建立串連的，處理http請求的個數，具體的並發數目可在伺服器的系統效能計數器中可以監控到。另一個就是http的請求數，它指的是使用者開啟網頁時，瀏覽器向伺服器發出的請求，不僅僅訪問網頁是HTTP請求，訪問網站裡的任何資源都是HTTP請求。說到這裡，就會有人好奇了，開啟一個網站，豈不是有好多請求數？是的，是這樣，譬如：開啟新浪微博首頁，就有74個請求；再開啟愛吼網的首頁，就有81個請求。此時細心的人就會發現，新浪微博首頁比愛吼網的首頁還要飽滿些，為何開啟速度卻非常快？其實，這就是我們要最佳化的重點。

工欲善其事，必先利其器。我們要分析出問題原因，找到一個好工具，就可以事半功倍了，這裡介紹幾種小工具，可以非常方便地查看到開啟一個頁面裡的http請求數有哪些，根據瀏覽器不同，常用的有三種方式：

第一種是HttpWatch，它是一個非常強大的網頁資料分析工具，可以整合到IE工具列裡，最新的版本也可以整合到fireFox裡面了，是愛吼網首頁的請求資訊，是不是一目瞭然？

650) this.width=650;" border="0" height="235" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1306261562-0.png" />  

第二種是Firebug，它是與Firefox整合在一起的功能強大的web開發工具，還可以即時編輯、調試和監測任何頁面的CSS、HTML和JavaScript。分析頁面的http請求只是一個準系統了，

650) this.width=650;" border="0" height="273" alt="" src="http://www.bkjia.com/uploads/allimg/131228/13062B316-1.png" />

 第三種是google推出的瀏覽器chrome內建的開發人員工具，骨幹至極，且介面非常友好，符合google的一貫風格，按快速鍵“F12”就出來了：

650) this.width=650;" border="0" height="158" alt="" src="http://www.bkjia.com/uploads/allimg/131228/13062A552-2.png" />

總結到這裡，其實問題已經分析清楚了，解決起來自然就得心應手。那具體如何減少？用戶端和服務端雙管其下，可以有效地提高網站的開啟速度。

在用戶端層面，已經有了標準的最佳化方案，一是合并檔案，將js與CSS合并到一個請求、並壓縮傳到用戶端；二是合并圖片，也就是使用image  sprites技術，將頁面裡的架構圖片，合并到一張圖中，采CSS樣式為定位；三是去除所有的重新導向、frames架構代碼。

在服務端層面，大家關注的可能比較少，就是Keep-Alive技術，通俗地講，就是所謂的持久串連，對於http這種大量的短已連線的服務來說，開啟持久串連的好處可以節省大量的TCP串連過程的開銷，同時也可以在一個串連裡能處理多個http的請求，對用戶端而言，也就相對地減少了http的並發請求，提高了網站的開啟速度。

 

本文出自 “科大訊飛ceecy的專欄” 部落格，請務必保留此出處http://ceecyj.blog.51cto.com/1640670/924196