作者：zhanhailiang 日期：2014-11-14
ShowSlow是开源的前端性能监控系统，提供了以下功能：
安装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“将性能监控数据上报到服务器端存储；
修改 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”，就表示数据存储成功。
说明：
/usr/local/wwwroot/showslow/beacon/yslow/index.php /usr/local/wwwroot/showslow/global.php
针对移动端的性能监控，目前由于其本身依赖的工具绝大多数只有PC端，在移动端缺乏相应的数据上报工具（特别是移动端本身复杂的网络环境），所以如果想使用ShowSlow作为前端性能监控平台，需要单独实现数据收集系统，而只是将ShowSlow当作展示系统使用。