前端性能監控系統ShowSlow

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

1. 簡單介紹

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

• 前端性能指標數據收集功能：ShowSlow原生提供了數據收集工具 DOM Monster!，但也支持經過YSlow，PageSpeed等第三方工具將性能數據上報給服務端完畢收集（其server端提供了針對多達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「將性能監控數據上報到server端存儲；

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，相應server端配置例如如下：

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

3). 其餘工具配置方法相似，略。

3. 數據展現系統

4. 應用場景及缺陷分析

1. 若使用DOM Monster作爲前端數據收集器，經過改動showslow/beacon/dommonster/dom-monster/src/dommonster.js和showslow/beacon/dommonster/index.php，可以實現本身主動化上報，代碼改動請見：

改動DOM Monster支持本身主動上報監控數據
=======
1. 改動beacon/dommonster/index.php；去掉confirm二次確認彈出框。

https://github.com/billfeller/showslow/blob/master/beacon/dommonster/index.php

2. 改動beacon/dommonster/dom-monster/src/dommonster.js；支持本身主動上報數據。

https://github.com/billfeller/dom-monster/blob/master/src/dommonster.js

但其自己所得的監控粒度很粗放。其統計表結構例如如下：

--
-- Table structure for table `dommonster`
--
 
CREATE TABLE IF NOT EXISTS `dommonster` (
`id` BIGINT(20) UNSIGNED NOT NULL COMMENT 'Measurement ID',
  `version` VARCHAR(255) DEFAULT NULL COMMENT 'Version of DOM Monster bookmarklet',
  `timestamp` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Measurement time',
  `url_id` BIGINT(20) UNSIGNED NOT NULL COMMENT 'URL ID',
  `elements` BIGINT(20) UNSIGNED NOT NULL COMMENT 'number of elements [number]',
  `nodecount` BIGINT(20) UNSIGNED NOT NULL COMMENT 'number of DOM nodes [number]',
  `textnodes` BIGINT(20) UNSIGNED NOT NULL COMMENT 'number of Text nodes [number]',
  `textnodessize` BIGINT(20) UNSIGNED NOT NULL COMMENT 'size of Text nodes [bytes]',
  `contentpercent` DECIMAL(5,2) UNSIGNED NOT NULL COMMENT 'content percentage [percentage]',
  `average` DECIMAL(10,1) UNSIGNED NOT NULL COMMENT 'average nesting depth [number]',
  `domsize` BIGINT(20) UNSIGNED NOT NULL COMMENT 'serialized DOM size [bytes]',
  `bodycount` BIGINT(20) UNSIGNED DEFAULT NULL COMMENT 'DOM tree serialization time [ms]'
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

2. 若使用YSlow等第三方工具確實實現收集細粒度的監控數據。以YSlow爲例，其統計表結構例如如下：

--
-- Table structure for table `yslow2`
--
 
CREATE TABLE IF NOT EXISTS `yslow2` (
`id` BIGINT(20) UNSIGNED NOT NULL COMMENT 'Entry id',
  `timestamp` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Measurement timestamp',
  `ip` INT(4) UNSIGNED DEFAULT '0' COMMENT 'IP address of the agent',
  `user_agent` text NOT NULL COMMENT 'User agent string',
  `url_id` BIGINT(20) UNSIGNED NOT NULL DEFAULT '0',
  `w` BIGINT(20) UNSIGNED NOT NULL DEFAULT '0' COMMENT 'size of the page in bytes',
  `o` SMALLINT(5) UNSIGNED NOT NULL DEFAULT '0' COMMENT 'overall YSlow grade calculated for this profile',
  `r` SMALLINT(6) UNSIGNED NOT NULL DEFAULT '0' COMMENT 'total amount of requests with empty cache',
  `i` text NOT NULL COMMENT 'testing profile used',
  `lt` BIGINT(20) UNSIGNED NOT NULL DEFAULT '0' COMMENT 'page load time',
  `ynumreq` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Make fewer HTTP requests',
  `ycdn` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Using CDN',
  `yexpires` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Expires Headers',
  `yemptysrc` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Avoid Empty Image src',
  `ycompress` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Gzip components',
  `ycsstop` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'CSS at the top',
  `yjsbottom` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'JS at the bottom',
  `yexpressions` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'CSS expressions',
  `yexternal` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Make JavaScript and CSS external',
  `ydns` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Reduce DNS lookups',
  `yminify` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Minify JavaScript and CSS',
  `yredirects` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Avoid URL redirects',
  `ydupes` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Remove duplicate JavaScript and CSS',
  `yetags` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Configure entity tags (ETags)',
  `yxhr` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Make AJAX cacheable',
  `yxhrmethod` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Use GET for AJAX requests',
  `ymindom` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Reduce the number of DOM elements',
  `yno404` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Avoid HTTP 404 (Not Found) error',
  `ymincookie` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Reduce cookie size',
  `ycookiefree` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Use cookie-free domains',
  `ynofilter` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Avoid AlphaImageLoader filter',
  `yimgnoscale` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Do not scale images in HTML',
  `yfavicon` SMALLINT(3) UNSIGNED DEFAULT NULL COMMENT 'Make favicon small and cacheable',
  `details` text COMMENT 'Beacon details'
) ENGINE=InnoDB AUTO_INCREMENT=31 DEFAULT CHARSET=utf8;

但是由於對工具的依賴，其自己沒法實現本身主動化監控用戶真實的應用場景。

針對移動端的性能監控。眼下由於其自己依賴的大多數高級工具絕大多數僅僅有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
• http://mir.aculo.us/dom-monster/