項目三--

時間 2019-12-09

標籤項目简体版

原文原文鏈接

網站用戶訪問速度監測分析項目javascript

剛來新公司不久作運維開發，本爲覺得要繼續作個人開源軟件開發，結果領導給分了個之前基本歷來沒考慮的任務，監測用戶訪問咱們網站的速度，沒錯，是監測全部的用戶訪問咱們網站的速度。就跟基調同樣。由於基調不能實現咱們一些特殊的定製需求，因此公司準備咱們本身開發一個。雖然之前沒作過，可是有挑戰纔有意思嘛，開始走起。php

首先，肯定頁面速度如何監控？監控什麼指標？如何分析？領導的基本需求以下：html

實現全國各地用戶訪問速度的按區域分析前端
實現用戶從瀏覽器開始請求到頁面加載完畢的每一步驟的指標統計java
實現對定點區域的任務下發web

到底咋作？剛開始想的是，可否經過分析網站日誌來實現呢？尼馬，固然不可能這麼簡單，由於日誌裏最多隻能記錄服務器收到請求到開始響應的時間，用戶什麼時候徹底加載完你的頁面，是找不到的。那咋辦？先學習基調的監測方法發現，他們是在全國各個機房裏埋了數萬個客戶端，讓這些客戶端定時自動訪問你的網站，而後再對每一個客戶端的加載速度作彙總後分析。很顯然咱們不可能在全國各個機房放一臺機器當客戶端，那樣的花費非得把公司賣了不行。本着花小錢辦大事的思想，靈光一現，爲何不讓用戶直接幫咱們測？咱們網站天天數億PV，這麼好的資源不用就白浪費了。咋讓用戶幫咱們測？呵呵，很簡單，在頁面埋碼，在用戶訪問咱們頁面的時候，瀏覽器會自動運行一段JS腳本，會紀錄從瀏覽器開始請求到整個頁面加載完畢的過程。而後個人腳本把這些紀錄的值作成一個字典，統一用GET的方式發送到後臺分析接口，後臺分接程序接到數據進來後就按相應的分析維度作分析，而後，而後問題就解決了嘛。redis

GOOD，既然覺得邏輯能走通，那就開始測試下吧，廢話少說上乾貨，如下爲實現過程：chrome

前端埋碼json

首先肯定收集如下指標跨域

onLoad頁面加載時間
頁面下載時間
JS加載時間
從request開始到服務器響應時間
DomReady時間
第一次渲染時間(白屏時間)
DNS lookup時間
從服務器下載第一個byte時間
導航類型
請求的url
瀏覽器類型
瀏覽器版本
分辨率

以上指標只是第一期功能，之後可能還會加不少新的指標，徹底靠本身寫JS來實現挺麻煩的，尼馬我是運維開發呀，不是搞前端的呀，這麼多東西怎麼弄，果斷尋找開源解決方案，找來找去找到了yahoo開源的一個頁面速度指標收集的小插件boomerang, 下載下來用了下發現很強大，支持自行開發plugin, 因而就在他的基礎上作了些更改，本身加入了一些自定義指標的收集。

爲了幫助看客瞭解，先跟你們說一下，以上指標如何收集？一個HTML頁面從開始服務器請求，到整個頁面展示在用戶面前，實際上是通過好多個步驟的，擦，幹說好累，仍是上圖吧。

如上圖，頁面整個加載過程通常爲：

輸入網址回車 navigationStart
DNS解析，獲取網站IP地址 domainLookupStart
向服務器IP發起請求，TCP/IP 3次握手，創建鏈接 ConnectStart
服務器開始處理用戶請求頁面的URL ResponseStart
向用戶發送第一個字節 FristByte
DOM加載完畢 domComplete
Onload事件開始 LoadEventtart
頁面加載完畢 LoadEventEnd

親，知道麼，如今基本上全部的主流瀏覽器都會在頁面加載的時候把這些指標記錄下來，你能夠直接在JS腳本里調用。調用方法等詳細指標解釋請看 https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

由於不支持IE9如下的瀏覽器，因此，去他媽的IE，果斷放棄老版本IE，直接設置爲在IE9如下不執行，簡單粗暴。

瀏覽器版本檢測代碼

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>

作完後，上線測試，打開網站，就看到個人腳本在華麗麗的跑了。

因爲天天收集量在大約上千萬，而後又須要用戶訪問速度進行實時分析，因此才用了storm實時日誌流分析，對數據作基本處理後，把各個地區的訪問統計一下，寫入redis,由於量大，實時數據只存1天左右，過了一天，就把這些數據按小時進行平均優化等。

分析方法，

因爲數據量大，若是直接簡單的對數據作平均的話，確定會出現不少極值，致使平均值不能表明整組數據的實際平均值，例如，兩組數，[1,999], [499,501] 兩組數平均後都等於500，直接取平均值就太坑了，這時候高中數學終於用上了，直接取標準差，中位數，而後又TP90，TP99了一下，一番下來，數據基本準了，固然其中不少細節實現，有興趣的同窗能夠專門找我探討。

直接看最後實現吧：

如下爲實時監控部分：

好吧，差就多就這些吧，回頭搞一下，爭取開源下。打完收工。

項目實戰之：網站用戶訪問質量分析監測分析項目開發

爲何作這個項目？

我想講，當你身處一家上市公司，公司老闆又創業明星，你們都認識他，用戶一訪問不了你的網站就會蛋疼的@你老闆，即便是他本身在拉屎時不當心把網線扯掉了，想一想老闆的微博每天收到的都是你家網站掛了的消息時那種一臉黑線的感受吧。他想，我是花錢養了一堆廢物麼？

而後老闆就把這些用戶的投訴發給了大家技術老大，技術老大讓你檢測網站是否不能訪問，你先從內部測，再從外面測，最後還發qq讓本身在外地的幾個前女朋友也幫你測試，都說網站沒問題，因而你告訴技術老大說網站沒問題，老大說你怎麼測的，你這個用戶來自廣東，你確認從測試了廣州節點沒問題麼？此時你就蒙逼了，由於你並無一個在廣州的女友，惟一進入記憶的也只是2年前在東莞幫你作大保健的姑娘，當時還勸人家從良，如今還依稀想起那姑娘幫你服務完離開時的回眸一笑的樣子，此時也不知她已散落在何方。。。，老闆打斷正走神的你，問你確認廣州節點有沒有問題。你振做了下說我從北京測試了直接訪問廣州cdn節點，也是沒問題的，此用戶不能上網並不能表明廣泛問題，有多是個別isp鏈路出了問題致使的，老闆又問你，那你怎麼不肯定這不是廣泛問題？只因你本身測試了說沒問題，就表明全部廣東人都沒問題了？碰上這樣的老闆，此時的你是這樣的。。。。

老闆又故做嚴肅了一下說，我固然知道廣州總體上訪問沒問題，但問題是咱們要有可視化的數據支持，要有能讓人一看便知，總體地區訪問大家網站的質量是什麼樣的，快？慢？仍是掛了？仍是怎樣，這些東西要有可視化的數據支持，不能你找了幾個朋友測試一下說沒問題就算完了，只要在客觀的、具備普遍表明性的、可視化的數據的支持下，咱們才能讓大老闆相信，咱們的網站確實沒問題，是否是？

原本剛纔還以爲老闆sb的你，聽這此番話，以爲，仍是老闆考慮的周全呀。

so to anwser below this question