前端性能监控系统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 versioned
find ./ -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.tsv
php dbupgrade.php
Nothing to upgrade from v.34 to v.34.
cd users && make
make[1]: Entering directory `/usr/local/wwwroot/showslow_1.2.2/users'
php depcheck.php
Using PHP version 5.3.29 ... OK
PHP mysqli extension is loaded ... OK
PHP mcrypt extension is loaded ... OK
PHP curl extension is loaded ... OK
PHP mbstring extension is loaded ... OK
Found configuration file ../users_config.php
php dbupgrade.php
Nothing to upgrade from v.31 to v.31.
php aggregatepoints.php
[*** SUCCESS ***] Installation and upgrade of Startup API completed successfully
make[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 = grade
extensions.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作为前端性能监控平台，需要单独实现数据收集系统，而只是将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

作者：bill200711022 发表于2014-11-15 1:07:03 原文链接

阅读：386 评论：0 查看评论