Front-end performance monitoring system ShowSlow, monitoring system showslow

Front-end performance monitoring system ShowSlow, monitoring system showslow

Author: zhanhailiang Date:

1. Introduction

ShowSlow is an open-source front-end performance monitoring system that provides the following functions:

• Frontend performance indicator data collection function: ShowSlow native provides data collection toolsDOM Monster!However, it also supports reporting performance data to the server through third-party tools such as YSlow and PageSpeed (the server provides the data collectors dommonster, dynatrace, events, har, metric, pagespeed, webpagetest, yslow );
• Front-end performance indicator data display system;

2. installation and configuration 1). installation and configuration

Install 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'

Modify ShowSlow DB Configuration:

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

Configure 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;    }   }

Configure beacon:

1). Use DOM Monster!

Access http: // showslow/beacon/dommonster/and set DOM Monster! Favorites as bookmarks, then access the http://m.vip.com, click the bookmarks "DOM Monster !", As follows:

Click"Send to Show Slow"Report performance monitoring data to server-side storage;

2) Configure YSlow to report data:

ModifyAbout: config:

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

Then configure"Autorun YSlow each time a web page is loaded":

After refreshing the page, capture the packet and you will see that the performance monitoring data is reported to the HTTP request:

If you see the response"HTTP/1.1 204 Data acceptedThe data is successfully stored.

Note:

• For data standards reported by YSlow, see http://yslow.org/user-guide/#yslow_beacon
• The YSlow configuration value extensions. yslow. defaultRuleset corresponds to the Rulesets on the panel. The corresponding server configuration is as follows:

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

3) Other tool configuration methods are similar, omitted. 3. Data Presentation System

4. Defects

For performance monitoring on mobile terminals, most of the tools on which mobile terminals depend are PC-based, and data reporting tools are lacking on mobile terminals (especially the complicated network environment of mobile terminals ), therefore, to use ShowSlow as the front-end performance monitoring platform, you must implement a data collection system separately, instead of using ShowSlow as the display system.

5. Reference

• 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