網(wǎng)站用戶訪問速度監(jiān)測(cè)分析項(xiàng)目
剛來(lái)新公司不久做運(yùn)維開發(fā)，本為以為要繼續(xù)做我的開源軟件開發(fā)，結(jié)果領(lǐng)導(dǎo)給分了個(gè)以前基本從來(lái)沒考慮的任務(wù)，監(jiān)測(cè)用戶訪問我們網(wǎng)站的速度，沒錯(cuò)，是監(jiān)測(cè)所有的用戶訪問我們網(wǎng)站的速度。就跟基調(diào)一樣。因?yàn)榛{(diào)不能實(shí)現(xiàn)我們一些特殊的定制需求，所以公司準(zhǔn)備我們自己開發(fā)一個(gè)。雖然以前沒做過，但是有挑戰(zhàn)才有意思嘛，開始走起。
首先，確定頁(yè)面速度如何監(jiān)控？監(jiān)控什么指標(biāo)？如何分析？領(lǐng)導(dǎo)的基本需求如下：
- 實(shí)現(xiàn)全國(guó)各地用戶訪問速度的按區(qū)域分析
- 實(shí)現(xiàn)用戶從瀏覽器開始請(qǐng)求到頁(yè)面加載完畢的每一步驟的指標(biāo)統(tǒng)計(jì)
- 實(shí)現(xiàn)對(duì)定點(diǎn)區(qū)域的任務(wù)下發(fā)
到底咋做？剛開始想的是，能否通過分析網(wǎng)站日志來(lái)實(shí)現(xiàn)呢？尼馬，當(dāng)然不可能這么簡(jiǎn)單，因?yàn)槿罩纠镒疃嘀荒苡涗浄?wù)器收到請(qǐng)求到開始響應(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ǎng)站，然后再對(duì)每個(gè)客戶端的加載速度做匯總后分析。很顯然我們不可能在全國(guó)各個(gè)機(jī)房放一臺(tái)機(jī)器當(dāng)客戶端，那樣的花費(fèi)非得把公司賣了不行。本著花小錢辦大事的思想，靈光一現(xiàn)，為什么不讓用戶直接幫我們測(cè)？我們網(wǎng)站每天數(shù)億PV，這么好的資源不用就白浪費(fèi)了。咋讓用戶幫我們測(cè)？呵呵，很簡(jiǎn)單，在頁(yè)面埋碼，在用戶訪問我們頁(yè)面的時(shí)候，瀏覽器會(huì)自動(dòng)運(yùn)行一段JS腳本，會(huì)紀(jì)錄從瀏覽器開始請(qǐng)求到整個(gè)頁(yè)面加載完畢的過程。然后我的腳本把這些紀(jì)錄的值做成一個(gè)字典，統(tǒng)一用GET的方式發(fā)送到后臺(tái)分析接口，后臺(tái)分接程序接到數(shù)據(jù)進(jìn)來(lái)后就按相應(yīng)的分析維度做分析，然后，然后問題就解決了嘛。
GOOD，既然以為邏輯能走通，那就開始測(cè)試下吧，廢話少說(shuō)上干貨，以下為實(shí)現(xiàn)過程：
-
前端埋碼
首先確定收集以下指標(biāo)
- onLoad頁(yè)面加載時(shí)間
- 頁(yè)面下載時(shí)間
- JS加載時(shí)間
- 從request開始到服務(wù)器響應(yīng)時(shí)間
- DomReady時(shí)間
- 第一次渲染時(shí)間(白屏?xí)r間)
- DNS lookup時(shí)間
- 從服務(wù)器下載第一個(gè)byte時(shí)間
- 導(dǎo)航類型
- 請(qǐng)求的url
- 瀏覽器類型
- 瀏覽器版本
- 分辨率
以上指標(biāo)只是第一期功能，以后可能還會(huì)加很多新的指標(biāo)，完全靠自己寫JS來(lái)實(shí)現(xiàn)挺麻煩的，尼馬我是運(yùn)維開發(fā)呀，不是搞前端的呀，這么多東西怎么弄，果斷尋找開源解決方案，找來(lái)找去找到了yahoo開源的一個(gè)頁(yè)面速度指標(biāo)收集的小插件boomerang, 下載下來(lái)用了下發(fā)現(xiàn)很強(qiáng)大，支持自行開發(fā)plugin, 于是就在他的基礎(chǔ)上做了些更改，自己加入了一些自定義指標(biāo)的收集。
為了幫助看客了解，先跟大家說(shuō)一下，以上指標(biāo)如何收集？一個(gè)HTML頁(yè)面從開始服務(wù)器請(qǐng)求，到整個(gè)頁(yè)面展現(xiàn)在用戶面前，其實(shí)是經(jīng)過好多個(gè)步驟的，擦，干說(shuō)好累，還是上圖吧。
如上圖，頁(yè)面整個(gè)加載過程一般為：
- 輸入網(wǎng)址回車 navigationStart
- DNS解析，獲取網(wǎng)站IP地址 domainLookupStart
- 向服務(wù)器IP發(fā)起請(qǐng)求，TCP/IP 3次握手，建立連接 ConnectStart
- 服務(wù)器開始處理用戶請(qǐng)求頁(yè)面的URL ResponseStart
- 向用戶發(fā)送第一個(gè)字節(jié) FristByte
- DOM加載完畢 domComplete
- Onload事件開始 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è)試，打開網(wǎng)站，就看到我的腳本在華麗麗的跑了。
由于每天收集量在大約上千萬(wàn)，然后又需要用戶訪問速度進(jìn)行實(shí)時(shí)分析，所以才用了storm實(shí)時(shí)日志流分析，對(duì)數(shù)據(jù)做基本處理后，把各個(gè)地區(qū)的訪問統(tǒng)計(jì)一下，寫入redis,因?yàn)榱看螅瑢?shí)時(shí)數(shù)據(jù)只存1天左右，過了一天，就把這些數(shù)據(jù)按小時(shí)進(jìn)行平均優(yōu)化等。
#p#
分析方法
由于數(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é)可以專門找我探討。
直接看最后實(shí)現(xiàn)吧：
以下為實(shí)時(shí)監(jiān)控部分：
好吧，差就多就這些吧，回頭搞一下，爭(zhēng)取開源下。 打完收工。
