web網(wǎng)站性能舉例分析

這篇文章主要講解了“web網(wǎng)站性能舉例分析”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“web網(wǎng)站性能舉例分析”吧！

【概觀(guān)】

什么使我們的網(wǎng)站變慢？Http 協(xié)議？通過(guò)更好的性能省錢(qián)和賺錢(qián)？性能規(guī)則

【什么使網(wǎng)站變慢】

對(duì)于大多數(shù)現(xiàn)代的網(wǎng)站，僅僅有10%-20%的響應(yīng)時(shí)間是用于生成和加載html document的。

那么，其他的時(shí)間用于加載什么呢？確切的說(shuō)，如下：

css；javascript（jquery，plugin 等等）；images

讓我們使用一個(gè)工具去看看-Fiddler

首先打開(kāi)fiddler，然后使用瀏覽器訪(fǎng)問(wèn) www.microsoft.com

這時(shí)候我們可以看到fiddler監(jiān)控到客戶(hù)端與微軟網(wǎng)站服務(wù)器之間的交互情況如下圖：

注意fiddler 右邊的選項(xiàng)卡，有一個(gè)timeline。載入default.asp話(huà)費(fèi)了大概1s的時(shí)間。讓我們?nèi)x這些行。再去看看timeline，如下圖

這時(shí)候我們根據(jù)數(shù)據(jù)就可以證明前邊的觀(guān)點(diǎn)，對(duì)于某個(gè)網(wǎng)站來(lái)說(shuō)，80%的時(shí)間是用于加載css/JS/image的。

【Http 協(xié)議】

對(duì)于http協(xié)議的理解是非常重要的，因?yàn)樗x了web 瀏覽器和 web 服務(wù)器如何交互。

Hypertext Transfer Protocol

對(duì)于這點(diǎn)來(lái)說(shuō)，最重要的是text，它不是基于二進(jìn)制的協(xié)議，而是基于text的。

協(xié)議是1997年1月在 RFC(Http1.1）定義的。請(qǐng)求/相應(yīng) 模式?？蛻?hù)端瀏覽器發(fā)送特定的request，服務(wù)器返回responseHeader 和body。 每個(gè)request/response 有header和body

HttpRequest

我們使用fiddler觀(guān)察一下我們?cè)L問(wèn)微軟的httprequest。

選中***個(gè)記錄。右邊選項(xiàng)卡依次->Inspecotrs->Raw

我們簡(jiǎn)單分析，

Get指明了url和http的版本。host指明了host的地址。accept-language指明了瀏覽器使用的語(yǔ)言。accept-Encoding指明了是否可以使用對(duì)瀏覽器到服務(wù)器之間的數(shù)據(jù)進(jìn)行壓縮。

HttpResponse

下面我們來(lái)看看剛才我們請(qǐng)求的響應(yīng)。

我在fiddler中選中的是第12行數(shù)據(jù)，選中右邊選項(xiàng)卡->Inspecotrs->Raw

Http/1/1 200 OK。是告訴大家，一切運(yùn)行良好。 200是一種狀態(tài)，如果遇到問(wèn)題可能會(huì)是404,500等。其他細(xì)節(jié)，大家可以自己查一下資料。

【通過(guò)更好的性能省錢(qián)和賺錢(qián)】

大家都可以明白。提升網(wǎng)站的性能，可以讓用戶(hù)更加滿(mǎn)意。而這也能讓我們省錢(qián)和賺錢(qián)。

省錢(qián)的辦法：使用更小的帶寬；更少的服務(wù)器數(shù)量

賺錢(qián)的辦法：增長(zhǎng)的銷(xiāo)售和流量

每增加100毫秒載入Amzon.com 會(huì)減少銷(xiāo)售額的1%.web

-當(dāng)google maps 的主頁(yè)大小從100KB減少到70-80k時(shí)，流量在***周會(huì)增在10%，在隨后的3周會(huì)增長(zhǎng)到25%。

-google 已經(jīng)根據(jù)你網(wǎng)站的性能去幫助決定搜索排名。

【性能規(guī)則】

減少http request

如何減少http request呢？我們根據(jù)上邊提到fiddler偵聽(tīng)到的http request 得知，好多次請(qǐng)求是去獲取css，javascript，和image的。

首先我們先來(lái)看看一個(gè)網(wǎng)站：

它是一個(gè)普通的網(wǎng)站他可以使用jquery來(lái)彈出圖片，我們用fiddler 來(lái)試試它。

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

讓我們看看這個(gè)網(wǎng)站的另一個(gè)版本。

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

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

js和css文件都變成1個(gè)了。我們把上邊的js文件合并成1個(gè)js文件。這樣我們就減少了httprequest的次數(shù)。

發(fā)送盡可能少的數(shù)據(jù)

我們回到fiddler。查看***個(gè)網(wǎng)站的jquery文件“jquery-1.6.2.js。

它的普通版本是236k。

***個(gè)網(wǎng)站需要加載js的總大小是279k。而第二個(gè)網(wǎng)站需要加載js的大小是50.8k。我們做了什么呢？只是把js文件里的白空格去掉了，就是對(duì)js文件的壓縮。

css文件也如此。在***的product版本上，我們使用合并的文件可以減少httprequest次數(shù)。當(dāng)然在debug的時(shí)候我們要保留空行增加代碼的可讀性。

關(guān)于壓縮js的工具我們?cè)诰W(wǎng)上可以找到很多，就不列舉。

減少交互的次數(shù)（適當(dāng)使用緩存）

讓我們刷新一下第二個(gè)網(wǎng)站，并觀(guān)看fiddler。我們可以發(fā)現(xiàn)，第二次加載至向服務(wù)器獲取了default.aspx。

并沒(méi)有重新加載js、css和圖片。因?yàn)闉g覽器已經(jīng)替我們緩存了那些文件。

感謝各位的閱讀，以上就是“web網(wǎng)站性能舉例分析”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)web網(wǎng)站性能舉例分析這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！