剛來(lái)新公司不久做運(yùn)維開(kāi)發(fā)，本為以為要繼續(xù)做我的開(kāi)源軟件開(kāi)發(fā)，結(jié)果領(lǐng)導(dǎo)給分了個(gè)以前基本從來(lái)沒(méi)考慮的任務(wù)，監(jiān)測(cè)用戶訪問(wèn)我們網(wǎng)站的速度，沒(méi)錯(cuò)，是監(jiān)測(cè)所有的用戶訪問(wèn)我們網(wǎng)站的速度。

剛來(lái)新公司不久做運(yùn)維開(kāi)發(fā)，本為以為要繼續(xù)做我的開(kāi)源軟件開(kāi)發(fā)，結(jié)果領(lǐng)導(dǎo)給分了個(gè)以前基本從來(lái)沒(méi)考慮的任務(wù)，監(jiān)測(cè)用戶訪問(wèn)我們網(wǎng)站的速度，沒(méi)錯(cuò)，是監(jiān)測(cè)所有的用戶訪問(wèn)我們網(wǎng)站的速度。就跟基調(diào)一樣。因?yàn)榛{(diào)不能實(shí)現(xiàn)我們一些特殊的定制需求，所以公司準(zhǔn)備我們自己開(kāi)發(fā)一個(gè)。雖然以前沒(méi)做過(guò)，但是有挑戰(zhàn)才有意思嘛，開(kāi)始走起。

首先，確定頁(yè)面速度如何監(jiān)控？監(jiān)控什么指標(biāo)？如何分析？領(lǐng)導(dǎo)的基本需求如下：

實(shí)現(xiàn)全國(guó)各地用戶訪問(wèn)速度的按區(qū)域分析

實(shí)現(xiàn)用戶從瀏覽器開(kāi)始請(qǐng)求到頁(yè)面加載完畢的每一步驟的指標(biāo)統(tǒng)計(jì)

實(shí)現(xiàn)對(duì)定點(diǎn)區(qū)域的任務(wù)下發(fā)

到底咋做？剛開(kāi)始想的是，能否通過(guò)分析網(wǎng)站日志來(lái)實(shí)現(xiàn)呢？尼馬，當(dāng)然不可能這么簡(jiǎn)單，因?yàn)槿罩纠镒疃嘀荒苡涗浄?wù)器收到請(qǐng)求到開(kāi)始響應(yīng)的時(shí)間，用戶何時(shí)完全加載完你的頁(yè)面，是找不到的。那咋辦？先學(xué)習(xí)基調(diào)的監(jiān)測(cè)方法發(fā)現(xiàn)，他們是在全國(guó)各個(gè)機(jī)房里埋了數(shù)萬(wàn)個(gè)客戶端，讓這些客戶端定時(shí)自動(dòng)訪問(wèn)你的網(wǎng)站，然后再對(duì)每個(gè)客戶端的加載速度做匯總后分析。很顯然我們不可能在全國(guó)各個(gè)機(jī)房放一臺(tái)機(jī)器當(dāng)客戶端，那樣的花費(fèi)非得把公司賣(mài)了不行。本著花小錢(qián)辦大事的思想，靈光一現(xiàn)，為什么不讓用戶直接幫我們測(cè)？我們網(wǎng)站每天數(shù)億PV，這么好的資源不用就白浪費(fèi)了。咋讓用戶幫我們測(cè)？呵呵，很簡(jiǎn)單，在頁(yè)面埋碼，在用戶訪問(wèn)我們頁(yè)面的時(shí)候，瀏覽器會(huì)自動(dòng)運(yùn)行一段JS腳本，會(huì)紀(jì)錄從瀏覽器開(kāi)始請(qǐng)求到整個(gè)頁(yè)面加載完畢的過(guò)程。然后我的腳本把這些紀(jì)錄的值做成一個(gè)字典，統(tǒng)一用GET的方式發(fā)送到后臺(tái)分析接口，后臺(tái)分接程序接到數(shù)據(jù)進(jìn)來(lái)后就按相應(yīng)的分析維度做分析，然后，然后問(wèn)題就解決了嘛。

GOOD，既然以為邏輯能走通，那就開(kāi)始測(cè)試下吧，廢話少說(shuō)上干貨，以下為實(shí)現(xiàn)過(guò)程：

• 前端埋碼

首先確定收集以下指標(biāo)

onLoad頁(yè)面加載時(shí)間

頁(yè)面下載時(shí)間

JS加載時(shí)間

從request開(kāi)始到服務(wù)器響應(yīng)時(shí)間

DomReady時(shí)間??????

第一次渲染時(shí)間(白屏?xí)r間)

DNS lookup時(shí)間????

從服務(wù)器下載第一個(gè)byte時(shí)間

導(dǎo)航類(lèi)型?

請(qǐng)求的url

瀏覽器類(lèi)型?????

瀏覽器版本?????

分辨率??????

以上指標(biāo)只是第一期功能，以后可能還會(huì)加很多新的指標(biāo)，完全靠自己寫(xiě)JS來(lái)實(shí)現(xiàn)挺麻煩的，尼馬我是運(yùn)維開(kāi)發(fā)呀，不是搞前端的呀，這么多東西怎么弄，果斷尋找開(kāi)源解決方案，找來(lái)找去找到了yahoo開(kāi)源的一個(gè)頁(yè)面速度指標(biāo)收集的小插件boomerang, 下載下來(lái)用了下發(fā)現(xiàn)很強(qiáng)大，支持自行開(kāi)發(fā)plugin, 于是就在他的基礎(chǔ)上做了些更改，自己加入了一些自定義指標(biāo)的收集。

為了幫助看客了解，先跟大家說(shuō)一下，以上指標(biāo)如何收集？一個(gè)HTML頁(yè)面從開(kāi)始服務(wù)器請(qǐng)求，到整個(gè)頁(yè)面展現(xiàn)在用戶面前，其實(shí)是經(jīng)過(guò)好多個(gè)步驟的，擦，干說(shuō)好累，還是上圖吧。

如上圖，頁(yè)面整個(gè)加載過(guò)程一般為：

輸入網(wǎng)址回車(chē) navigationStart

DNS解析，獲取網(wǎng)站IP地址? domainLookupStart

向服務(wù)器IP發(fā)起請(qǐng)求，TCP/IP 3次握手，建立連接 ConnectStart

服務(wù)器開(kāi)始處理用戶請(qǐng)求頁(yè)面的URL???? ResponseStart

向用戶發(fā)送第一個(gè)字節(jié)? ?FristByte

DOM加載完畢????????????????? domComplete

Onload事件開(kāi)始?????????????? LoadEventtart

頁(yè)面加載完畢??????????????????? LoadEventEnd

親，知道么，現(xiàn)在基本上所有的主流瀏覽器都會(huì)在頁(yè)面加載的時(shí)候把這些指標(biāo)記錄下來(lái)，你可以直接在JS腳本里調(diào)用。調(diào)用方法等詳細(xì)指標(biāo)解釋請(qǐng)看? https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

因?yàn)椴恢С諭E9以下的瀏覽器，所以，去他媽的IE，果斷放棄老版本IE，直接設(shè)置為在IE9以下不執(zhí)行，簡(jiǎn)單粗暴。

瀏覽器版本檢測(cè)代碼

<script?type="text/javascript"> ?

? ?

???????function?get_browser()?{ ?

???????????var?N?=?navigator.appName,?ua?=navigator.userAgent,?tem; ?

???????????var?M?=ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i); ?

???????????if?(M?&&?(TEM?=?ua.match(/version\/([\.\d]+)/i))?!=?null)?M[2]?=tem[1]; ?

???????????M?=?M???[M[1],?M[2]]?:?[N,?navigator.appVersion,?'-?']; ?

???????????return?M[0]; ?

???????} ?

???????function?get_browser_version()?{ ?

???????????var?N?=?navigator.appName,?ua?=?navigator.userAgent,?tem; ?

???????????var?M?=?ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i); ?

???????????if?(M?&&?(tem?=?ua.match(/version\/([\.\d]+)/i))?!=?null)?M[2]?=tem[1]; ?

???????????M?=?M???[M[1],?M[2]]?:?[N,?navigator.appVersion,?'-?']; ?

???????????return?M[1]; ?

???????} ?

???????var?browser?=?get_browser(); ?

???????var?browser_version?=?get_browser_version(); ?

???????var?br_detect?=?0;?//default?to?run ?

???????if?(browser?==?'MSIE')?{ ?

???????????if?(parseInt(browser_version)?<?9)?{ ?

????????????????var?br_detect?=?1;?//not?runthe?status?js ?

???????????} ?

????????}?//end?if?browser ?

? ?

???????????????????//setJS?controller?variable?for?speed?monitor?plugin ?

???????????????????varBoomRunMark?=?0;?//0?=?enable?,??1=disable ?

???????????????????varBoomKickStartMark?=?5;?//?run?the?collect?plugin?when?random?num?<?5 ?

???????????????????varRandomNumber?=?Math.floor((Math.random()?*?10)?+?1); ?

???????????????????if(br_detect?==?0)?{ ?

????????????????????????????imgLoadBeginTime=?new?Date(); ?

??????????????????????????? ?

???????????????????} ?

???????????????????//console.log('randomnumber?:'+?RandomNumber); ?

???????if?(br_detect?==?0)?{ ?

?????????????????????if?(BoomRunMark?==?0){ ?

????????????????????????????if(RandomNumber??<?BoomKickStartMark?){ ?

?????????????????????????????????????BOOMR.init({ ?

???????????????????????????????????????????????beacon_url:"http://perf.che168.com/pv_perf.php", ?

???????????????????????????????????????????????BW:{?enabled:?false?}, ?

???????????????????????????????????????????????RT:{ ?

????????????????????????????????????????????????????????cookie:'CHE168-RT'?

???????????????????????????????????????????????} ?

?????????????????????????????????????}); ?

????????????????????????????}//endRandomNumber?check ?

?????????????????????}//?end?BoomRunMark?check ?

???????}//end?if?br_detect ?

???????? ?

</script> ?

做完后，上線測(cè)試，打開(kāi)網(wǎng)站，就看到我的腳本在華麗麗的跑了。

?

由于每天收集量在大約上千萬(wàn)，然后又需要用戶訪問(wèn)速度進(jìn)行實(shí)時(shí)分析，所以才用了storm實(shí)時(shí)日志流分析，對(duì)數(shù)據(jù)做基本處理后，把各個(gè)地區(qū)的訪問(wèn)統(tǒng)計(jì)一下，寫(xiě)入redis,因?yàn)榱看?#xff0c;實(shí)時(shí)數(shù)據(jù)只存1天左右，過(guò)了一天，就把這些數(shù)據(jù)按小時(shí)進(jìn)行平均優(yōu)化等。

分析方法

由于數(shù)據(jù)量大，如果直接簡(jiǎn)單的對(duì)數(shù)據(jù)做平均的話，肯定會(huì)出現(xiàn)很多極值，導(dǎo)致平均值不能代表整組數(shù)據(jù)的實(shí)際平均值，例如，兩組數(shù)，[1,999], [499,501] 兩組數(shù)平均后都等于500，直接取平均值就太坑了，這時(shí)候高中數(shù)學(xué)終于用上了，直接取標(biāo)準(zhǔn)差，中位數(shù)，然后又TP90，TP99了一下，一番下來(lái)，數(shù)據(jù)基本準(zhǔn)了，當(dāng)然其中很多細(xì)節(jié)實(shí)現(xiàn)，有興趣的同學(xué)可以專(zhuān)門(mén)找我探討。

直接看最后實(shí)現(xiàn)吧：

以下為實(shí)時(shí)監(jiān)控部分：

好吧，差就多就這些吧，回頭搞一下，爭(zhēng)取開(kāi)源下。 打完收工。

總結(jié)

以上是生活随笔為你收集整理的网站用户访问速度监测分析项目的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。