12.1 前端性能測試
性能測試通常我們最關心的是后端服務器的處理能力，而前端的性能通常被大家忽視，本章節將對前端的性能測試內容進行介紹。
隨著性能測試工作的深入開展，性能測試工作也越發精細，在服務器、數據庫、中間件、網絡、源代碼等方面進行性能調優、性能得到提升后，現在越來越多的公司已經關注產品前端的性能表現。
圖12-0 五大主流瀏覽器綜合性能對比測試文章
注：
1．該圖片相關信息來自華軍資訊；
2．文章連接：http：//news.newhua.com/news/2011/0407/119523.shtml
盡管這篇文章發表于2011年，但是其具有一定的代表性，這篇文章結合五大主流瀏覽器：
即：微軟的IE、Mozilla的火狐、谷歌的Chrome、挪威歐普拉軟件公司的Opera、蘋果的Safari。從標簽啟動時間、頁面加載時間、硬件加速測試、內存占用情況等方面進行了對比，給出了相關的具體數據信息。以上為瀏覽器（即Web前端）的一些對比數據，其也反映了在對瀏覽器產品實現的過程中，各個廠家因編碼不同、實現方法、關注的重點不同，所以最終產品的表現也不盡相同。
這里拋開瀏覽器產品本身性能差異，而從應用特定瀏覽器分析被測試應用的方法和改善前端性能手段兩方面進行簡單說明。
要想了解應用的前端性能表現，您可以通過使用HttpWatch、Page Speed、Dyna Trace和Yslow等工具來獲得系統前端的性能指標相關信息。
12.2 HttpWatch工具
12.2.1 HttpWatch簡介
HttpWatch是強大的網頁數據分析工具，其可以集成在Internet Explorer和FireFox工具欄，其主要包括網頁摘要Cookies管理、緩存管理、消息頭發送/接收、字符查詢、POST 數據和目錄管理功能、報告輸出。它不用代理服務器或一些復雜的網絡監控工具，就能夠在顯示網頁同時顯示網頁請求和返回的日志信息。
您只需要輸入要考察性能的網站地址，啟動錄制按鈕，軟件就可以對網站與瀏覽器之間的請求和響應通信情況進行分析。每一個HTTP記錄都可以詳細分析其 Cookies、消息頭、字符查詢等信息，支持HTTPS及分析報告輸出為XML、CSV等格式。
目前官方（網址：http：//www.httpwatch.com/）提供兩個HttpWatch版本下載。
HttpWatch Basic Edition （基礎版）：免費提供下載，任何人都可以用來查看基本的HTTP / HTTPS的詳細信息，并記錄跟蹤文件。
HttpWatch Professional Edition （專業版）：該版本沒有任何功能限制，可以通過HttpWatch獲取HTTP / HTTPS的任何URL的詳細信息，并能被用于查看跟蹤文件，需要說明的是在工具安裝過程中其需要許可文件（后綴為.lic的文件）。
關于HttpWatch工具的安裝過程十分簡單，所以不進行贅述，讀者朋友自行安裝即可。
12.2.2 HttpWatch工具使用
這里以HttpWatch Professional Edition 8.0作為講解工具版本，作者的瀏覽器是IE 8.0。HttpWatch安裝完成以后，您可以打開IE瀏覽器，在插件欄和菜單欄您都可以打開該插件，如圖12-1所示。
圖12-1 基于IE瀏覽器HttpWatch插件打開方式
其操作方式也十分簡單，您打開插件以后，單擊紅色的【Record】錄制按鈕，然后在IE的URL地址欄中輸入您要考察的網站地址即可，這里以輸入“http：//www.baidu.com”為例，即：我們想了解訪問百度首頁的一些性能指標情況。鑒于我們僅考察百度首頁的相關信息，得到該部分內容相關數據后，您就可以單擊【Stop】按鈕，停止錄制。錄制完成之后，在HttpWatch工具中將展現其相關的數據信息，如圖12-2所示。停止錄制后，插件默認選中“Summary”頁，同時下方展示相關數據信息，如圖12-3所示。這部分內容將是我們重點講解的內容。
圖12-2 基于IE瀏覽器HttpWatch插件打開方式
圖12-3 基于IE瀏覽器HttpWatch插件打開方式
首先，了解一圖12-3上半部分相關數據信息的含義，如圖12-4所示。您會看到該數據表格共包含8列，那么每列代表的含義是什么呢？
圖12-3 訪問百度首頁獲得的數據信息上半部分
下面簡單對各列的信息描述一下，參見表12-1。
序 號 | 列 名 | 含 義 |
1 | Started | 表示開始記錄URL的起始時間，在本例中應用的是偏移時間，您還可以在視圖菜單中設置為本地時間或國際標準時間 |
2 | Time | 從請求發出直到返回最后的結果所耗費的時間，Time=Blocked+DNS Lookup+Connect+ Send+Wait+Receive，后續將展示這部分內容 |
3 | Sent | 發送請求時傳送的字節 |
4 | Received | 系統響應返回結果接收的字節 |
5 | Method | 請求過程中使用的方法，一般為GET和POST |
6 | Result | 系統返回的請求結果，一般用狀態碼表示 |
7 | Type | 以圖標的形式體現下載的資源類型，將鼠標移動到圖標處將顯示文本提示信息 |
8 | URL | 顯示當前請求的頁面URL地址 |
下面參見圖12-4，針對訪問百度首頁您是不是就可以得出如下結論了呢？訪問百度首頁，共耗費了60毫秒，發送668字節，接收4300字節，應用的是GET方法，服務器給予成功響應。也許有的讀者說了不可能吧，怎么這么快？這是因為由于作者經常訪問百度，所以該地址的一些資源信息被緩存了，從圖12-4您也能看到有些內容是從緩存中取得的。接下來，再讓我們一起來看一下下方豐富的相關數據信息，如圖12-5所示。
圖12-5 訪問百度首頁獲得的數據信息下半部分
讓我們逐頁來看一下相關的數據信息：
（1）Overview頁信息（如圖12-6所示）
圖12-6 訪問百度首頁獲得的數據信息下半部分——Overview頁信息
Display URL：表示請求的地址為百度首頁，即：http：//www.baidu.com/。
Started At：發送請求的時刻，本地時間。
DNS Lookup：DNS解析，找名稱為www.baidu.com的主機。
Connecting：開始同解析后的主機進行連接，主機IP地址為119.75.217.56。
Connected：與119.75.217.56建立了連接，本地的連接地址和端口為“192.168.0.151：4896”。
HTTP Request：通過瀏覽器發出的請求，這里的請求是“http：//www.baidu.com/”。
HTTP Response：服務器返回的頭和內容信息。
（2）Time Chart頁信息（如圖12-7所示）。
圖12-7 訪問百度首頁獲得的數據信息下半部分——Time Chart頁信息
該頁以直觀線條方式顯示了各部分的耗時情況，左側顯示考察的URL總體耗時情況，右側針對左側圖示給出了Blocked（阻塞）、DNS Lookup（DNS尋址）、Connect（連接）、Send（發送請求）、Wait（等待服務器響應）、Receive（返回響應）、TTFB（即：Time To First Byte，首字節返回）和Network（網絡）耗費時間的情況。
下面作者以表格形式給出各部分耗時相關的一些說明信息，參見表12-2所示。
表12-2 各段耗時說明
序號 | 圖示名稱 | 含 義 |
1 | Blocked | 阻塞時間包括任何預處理時間（比如緩存查找）和花費的時間等待網絡連接可用。瀏覽器限制數量的并發網絡連接每個主機名和將請求排隊，如果已經達到極限則后續請求需排隊 |
2 | DNS Lookup | DNS解析一個主機名到一個IP地址所耗費的時間 |
3 | Connect | 連接是所需的時間創建一個TCP連接到Web服務器(或代理)。如果一個安全的HTTPS連接正在用這段時間包括SSL握手過程 |
4 | Send | 發送是發送HTTP請求消息到服務器所需的時間 |
5 | Wait | 等待是等待從服務器得到響應消息的時間。這個值包括由于網絡延遲和請求Web服務器所需時間 |
6 | Receive | 客戶端接收從服務器讀取響應消息的時間。這個值取決于內容返回的大小、網絡帶寬和是否使用了HTTP壓縮等 |
7 | TTFB | TTFB是從瀏覽器發出請求到服務器返回第一個字節所耗費的時間。它包括TCP連接時間，發送請求時間和接收第一個字節的響應消息時間 |
8 | Network | 網絡是一個HTTP請求在網絡消息傳輸上耗費的時間 |
從圖12-7您可以一目了然地看到訪問百度首頁共耗費了60毫秒的時間，其主要耗費時間的部分在服務器返回響應數據上，其耗費了39毫秒。
（3）Headers頁信息。
圖12-8 訪問百度首頁獲得的數據信息下半部分——Headers頁信息
圖12-8給出了發送請求頭和返回請求頭的相關內容，這里我們也列一個表格給予分析，參見表12-3和表12-4所示。
序號 | 表頭信息 | 含 義 |
1 | GET /HTTP/1.1 | “GET”代表請求方法，“HTTP/1.1”代表協議和協議的版本 |
2 | Accept | Accept請求報頭域用于指定客戶端接受哪些類型的信息。例如：Accept：text/html，表明客戶端希望接受html文本 |
3 | Accept-Encoding | Accept-Encoding請求報頭域類似于Accept，但是它是用于指定可接受的內容編碼。例如：Accept-Encoding:gzip,deflate.如果請求消息中沒有設置這個域服務器假定客戶端對各種內容編碼都可以接受 |
4 | Accept-Language | Accept-Language請求報頭域類似于Accept，但是它是用于指定一種自然語言。例如：Accept-Language:zh-cn，中文。如果請求消息中沒有設置這個報頭域，服務器假定客戶端對各種語言都可以接受 |
5 | Connection | 連接類型，默認為Keep-Alive（長連接），如果不希望使用長連接，則需要在header中指明Connection的值為Close |
6 | Cookie | Cookie是由服務器端生成，發送給瀏覽器，瀏覽器會將Cookie的key/value保存到某個目錄下的文本文件內，下次請求同一網站時就發送該Cookie給服務器。服務器可以利用Cookies包含信息的任意性來篩選并經常性維護這些信息，以判斷在HTTP傳輸中的狀態。可以判斷其是否登錄過網站，客戶的喜好等 |
7 | Host | Host請求報頭域主要用于指定被請求資源的Internet主機和端口號，它通常從HTTP URL中提取出來的，我們在瀏覽器中輸入：http://bbs.51testing.com/，瀏覽器發送的請求消息中就會包含Host請求報頭域，如下：Host：bbs.51testing.com：n，此處使用缺省端口號80，若指定了端口號為8080，則變成：Host：bbs.51testing.com:8080 |
8 | User-Agent | User-Agent請求報頭域允許客戶端將它的操作系統、瀏覽器和其他屬性告訴服務器 |
關于GET和POST方法在這里簡單做一下說明，GET方法是默認的HTTP請求方法，我們日常用GET方法來提交表單數據，然而用GET方法提交的表單數據只經過了簡單的編碼，同時它將作為URL的一部分向Web服務器發送，因此，如果使用GET方法來提交表單數據就存在著安全隱患上。同時由于GET方法提交的數據是作為URL請求的一部分所以提交的數據量也不能太大。POST方法是GET方法的一個替代方法，它主要是向Web服務器提交表單數據，尤其是大批量的數據。POST方法克服了GET方法的一些缺點。通過POST方法提交表單數據時，數據不是作為URL請求的一部分而是作為標準數據傳送給Web服務器，這就克服了GET方法中的信息無法保密和數據量太小的缺點。因此，出于安全的考慮以及對用戶隱私的保護，通常表單提交時采用POST方法。
表12-4 服務器端響應返回表頭說明
序號 | 表頭信息 | 含 義 |
1 | HTTP/1.1 200 OK | “HTTP/1.1代表協議和協議的版本，200為HTTP響應代碼，表示成功 |
2 | Cache-Control | Cache- Control指定請求和響應遵循的緩存機制。在請求消息或響應消息中設置 Cache-Control并不會修改另一個消息處理過程中的緩存處理過程。請求時的緩存指令包括no-cache、no-store、max-age、 max-stale、min-fresh、only-if-cached，響應消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各個消息中的指令含義如下： Public指示響應可被任何緩存區緩存; Private指示對于單個用戶的整個或部分響應消息，不能被共享緩存處理。這允許服務器僅僅描述當用戶的部分響應消息，此響應消息對于其他用戶的請求無效; no-cache指示請求或響應消息不能緩存; no-store用于防止重要的信息被無意的發布。在請求消息中發送將使得請求和響應消息都不使用緩存; max-age指示客戶機可以接收生存期不大于指定時間（以秒為單位）的響應; min-fresh指示客戶機可以接收響應時間小于當前時間加上指定時間的響應; max-stale指示客戶機可以接收超出超時期間的響應消息。如果指定max-stale消息的值，那么客戶機可以接收超出超時期指定值之內的響應消息 |
3 | Connection | 連接類型，默認為Keep-Alive（長連接），如果不希望使用長連接，則需要在header中指明Connection的值為Close |
4 | Content-Encoding | Accept-Encoding請求報頭域類似于Accept，但是它是用于指定可接受的內容編碼。例如：Accept-Encoding:gzip,deflate，如果請求消息中沒有設置這個域服務器假定客戶端對各種內容編碼都可以接受 |
5 | Content-Length | 表示內容長度，只有當瀏覽器使用持久HTTP連接時才需要這個數據 |
6 | Content-Type | 表示服務器發送的內容的MIME類型 |
7 | Date | Date頭域表示消息發送的時間，時間的描述格式由rfc822定義。例如，Thu,15 Nov 2012 05:56:32 GMT。Date描述的時間表示世界標準時間 |
8 | Expires | Expires: Thu,15 Nov 2012 05:56:32 GMT 需和Last-Modified結合使用。用于控制請求文件的有效時間，當請求數據在有效期內時，客戶端瀏覽器從緩存請求數據而不是服務器端，當緩存中數據失效或過期，才從服務器更新數據 |
9 | Server | 指示服務器的類型，如apache、 tomcat。這里出現的BWS應該是Baidu Web Server，百度自己研發的Web服務器用來代替apache |
關于MIME（Multipurpose Internet Email Extension），意為多用途Internet郵件擴展，它是一種多用途網際郵件擴充協議，在1992年最早應用于電子郵件系統，但后來也應用到瀏覽器。服務器會將它們發送的多媒體數據的類型告訴瀏覽器，而通知手段就是說明該多媒體數據的MIME類型，從而讓瀏覽器知道接收到的信息哪些是MP3文件，哪些是JPEG文件等。當服務器把把輸出結果傳送到瀏覽器上的時候，瀏覽器必須啟動適當的應用程序來處理這個輸出文檔。在HTTP中，MIME類型被定義在<head>、</head>部分的Content-Type中。
后續內容請從書籍獲得……
（未完待續）
版權聲明：51Testing軟件測試網及相關內容提供者擁有51testing.com內容的全部版權，未經明確的書面許可，任何人或單位不得對本網站內容復制、轉載或進行鏡像。51testing軟件測試網歡迎與業內同行進行有益的合作和交流，如果有任何有關內容方面的合作事宜，請聯系我們。