【網站效能指南】（一）概述

文章目錄

• 【什麼使網站變慢】
• 【Http 協議】
• 【通過更好的效能省錢和賺錢】
• 【效能規則】

【概觀】

• 什麼使我們的網站變慢？
• Http 協議
• 通過更好的效能省錢和賺錢
• 效能規則

【什麼使網站變慢】

• 對於大多數現代的網站，僅僅有10%-20%的回應時間是用於產生和載入html document的。

        那麼，其他的時間用於載入什麼呢？確切的說，如下：

1. css
2. javascript（jquery，plugin 等等）
3. images

    讓我們使用一個工具去看看-Fiddler (http://www.fiddler2.com/fiddler2/)

    首先開啟fiddler，然後使用瀏覽器訪問 www.microsoft.com

    這時候我們可以看到fiddler監控到用戶端與微軟網站伺服器之間的互動情況如：

 

注意fiddler 右邊的選項卡，有一個timeline。載入default.asp話費了大概1s的時間。讓我們全選這些行。再去看看timeline，如

 

這時候我們根據資料就可以證明前邊的觀點，對於某個網站來說，80%的時間是用於載入css/JS/image的。

 

【Http 協議】

對於http協議的理解是非常重要的，因為它定義了網頁瀏覽器和 網頁伺服器如何互動。

• Hypertext Transfer Protocol

       對於這點來說，最重要的是text，它不是基於二進位的協議，而是基於text的。

• 協議是1997年1月在 RFC(Http1.1）定義的。
• 請求/相應 模式。用戶端瀏覽器發送特定的request，伺服器返回response
• Header 和body。 每個request/response 有header和body

以下是 http協議的內容。我十分推薦你們閱讀它：http://tinyurl.com/8395lq

 

HttpRequest

我們使用fiddler觀察一下我們訪問微軟的httprequest。

選中第一個記錄。右邊選項卡依次->Inspecotrs->Raw

我們簡單分析，

Get指明了url和http的版本。

host指明了host的地址。

accept-language指明了瀏覽器使用的語言

accept-Encoding指明了是否可以使用對瀏覽器到伺服器之間的資料進行壓縮。

 

HttpResponse

下面我們來看看剛才我們請求的響應。

我在fiddler中選中的是第12行資料，選中右邊選項卡->Inspecotrs->Raw

#	Result	Protocol	Host	URL	Body	Caching	Content-Type	Process	Comments	Custom
12	200	HTTP	www.microsoft.com	/en-us/homepage/shared/core/2/js/js.ashx?&	3	private	text/javascript; charset=utf-8	chrome:3856

 

Http/1/1 200 OK。是告訴大家，一切運行良好。 200是一種狀態，如果遇到問題可能會是404,500等。
其他細節，大家可以自己查一下資料。

【通過更好的效能省錢和賺錢】

大家都可以明白。提升網站的效能，可以讓使用者更加滿意。而這也能讓我們省錢和賺錢。

• 省錢的辦法：

使用更小的頻寬

更少的伺服器數量

• 賺錢的辦法：

增長的銷售和流量

• • -每增加100毫秒載入Amzon.com 會減少銷售額的1%.web
  • -當google maps 的首頁大小從100KB減少到70-80k時，流量在第一周會增在10%，在隨後的3周會增長到25%。
  • -google 已經根據你網站的效能去協助決定搜尋排名。

對於網站效能對流量和銷售產生的影響請參見相關文章《web效能心理學》http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

 

【效能規則】

1. 減少http request

如何減少http request呢？我們根據上邊提到fiddler偵聽到的http request 得知，好多次請求是去擷取css，javascript，和image的。

首先我們先來看看一個網站：

它是一個普通的網站他可以使用jquery來彈出圖片，我們用fiddler 來試試它。

我們可以看出。他包含了一些css檔案，也使用了jquery。

讓我們看看這個網站的另一個版本。

樣子是一模一樣的，我就不show圖了。

讓我們看看fiddler 又幫我們抓到了什麼：

js和css檔案都變成1個了。我們把上邊的js檔案合并成1個js檔案。這樣我們就減少了httprequest的次數。

 

2.發送儘可能少的資料

我們回到fiddler。查看第一個網站的jquery檔案“jquery-1.6.2.js。

它的普通版本是236k。

 

第一個網站需要載入js的總大小是279k。

而第二個網站需要載入js的大小是50.8k。

我們做了什麼呢？只是把js檔案裡的白空格去掉了，就是對js檔案的壓縮。

css檔案也如此。在最後的product版本上，我們使用合并的檔案可以減少httprequest次數。當然在debug的時候我們要保留空行增加代碼的可讀性。

關於壓縮js的工具我們在網上可以找到很多，就不列舉。

3.減少互動的次數（適當使用緩衝）

讓我們重新整理一下第二個網站，並觀看fiddler。我們可以發現，第二次載入至向伺服器擷取了default.aspx。

並沒有重新載入js、css和圖片。因為瀏覽器已經替我們緩衝了那些檔案。

 

後續的章節是

【效能測量】

【基礎實施效能】

【前段效能】

【五花八門的效能】

敬請關注