前端效能監控系統ShowSlow，監控系統showslow

前端效能監控系統ShowSlow，監控系統showslow

  作者：zhanhailiang 日期：2014-11-14

1. 簡介

ShowSlow是開源的前端效能監控系統，提供了以下功能：

• 前端效能指標資料收集功能：ShowSlow原生提供了資料收集工具DOM Monster!，但也支援通過YSlow，PageSpeed等第三方工具將效能資料上報給服務端完成收集（其伺服器端提供了針對多達8種不同工具上報的資料收集器dommonster，dynatrace，events，har，metric，pagespeed，webpagetest，yslow）；
• 前端效能指標資料展示系統；

2. 安裝與配置1). 安裝與配置

安裝ShowSlow：

[root@~/software]# wget http://www.showslow.org/downloads/showslow_1.2.2.tar.bz2[root@~/software]# tar jxf showslow_1.2.2.tar.bz2[root@~/software]# mv showslow_1.2.2 /usr/local/wwwroot/[root@/usr/local/wwwroot]# ln -s showslow_1.2.2 showslow[root@/usr/local/wwwroot]# ln -s /usr/local/php/bin/php /usr/local/bin/php[root@/usr/local/wwwroot/showslow]# make# generating crc32 hashes of all assets that should be versionedfind ./ -type f | grep -v -E '^./(timeline|timeplot|ajax|users|svn-assets|flot\/examples)/' | grep -E '\.(png|jpg|js|gif|ico)$' | sort | xargs -n10 php crc32.php | sed -e 's/\t\.\//\t/' > asset_versions.tsvphp dbupgrade.phpNothing to upgrade from v.34 to v.34.cd users && makemake[1]: Entering directory `/usr/local/wwwroot/showslow_1.2.2/users'php depcheck.phpUsing PHP version 5.3.29 ... OKPHP mysqli extension is loaded ... OKPHP mcrypt extension is loaded ... OKPHP curl extension is loaded ... OKPHP mbstring extension is loaded ... OKFound configuration file ../users_config.phpphp dbupgrade.phpNothing to upgrade from v.31 to v.31.php aggregatepoints.php[*** SUCCESS ***] Installation and upgrade of Startup API completed successfullymake[1]: Leaving directory `/usr/local/wwwroot/showslow_1.2.2/users'

修改ShowSlow DB配置：

[root@/usr/local/wwwroot/showslow]# cp config.sample.php config.php

配置Nginx:

server {    listen       80;     server_name  showslow;    root   /usr/local/wwwroot/showslow;    location / {         root   /usr/local/wwwroot/showslow;        index  index.php index.html index.htm;    }       if (!-e $request_filename) {        rewrite ^(.*)$ /index.php$1 last;    }       #error_page  404              /404.html;    # redirect server error pages to the static page /50x.html    #       #error_page   500 502 503 504  /50x.html;    #location = /50x.html {    #    root   html;    #}      # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000    #       location ~ .*\.php(\/.*)*$ {        root           /usr/local/wwwroot/showslow;        fastcgi_pass   127.0.0.1:9000;        fastcgi_index  index.php;        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;        include        fastcgi_params;    }   }

配置beacon：

1). 使用DOM Monster!

訪問http://showslow/beacon/dommonster/，將DOM Monster!收藏為書籤，然後訪問http://m.vip.com，點擊書籤“DOM Monster!”，如下：

點擊“Send to Show Slow“將效能監控資料上報到伺服器端儲存；

2). 配置YSlow上報資料：

修改about:config：

extensions.yslow.beaconUrl = http://showslow/beacon/yslow/extensions.yslow.beaconInfo = gradeextensions.yslow.optinBeacon = true

然後配置“Autorun YSlow each time a web page is loaded”：

重新整理頁面後，抓包就可以看到效能監控資料上報HTTP請求：

如果看到響應“HTTP/1.1 204 Data accepted”，就表示資料存放區成功。

說明：

• 對於YSlow上報的資料標準請參考http://yslow.org/user-guide/#yslow_beacon
• YSlow配置值extensions.yslow.defaultRuleset對應面板上的Rulesets，對應伺服器端配置如下：

  /usr/local/wwwroot/showslow/beacon/yslow/index.php  /usr/local/wwwroot/showslow/global.php

3). 其它工具配置方法類似，略。3. 資料展示系統

4. 缺陷

針對移動端的效能監控，目前由於其本身依賴的工具絕大多數只有PC端，在移動端缺乏相應的資料上報工具（特別是移動端本身複雜的網路環境），所以如果想使用ShowSlow作為前端效能監控平台，需要單獨實現Tlog，而只是將ShowSlow當作展示系統使用。

5. 參考

• http://www.showslow.org/Main_Page
• http://www.showslow.org/Installation_and_configuration
• http://yslow.org/user-guide/#yslow_beacon
• http://www.cnblogs.com/fnng/archive/2011/09/24/2186708.html