前端性能监控系统ShowSlow

标签: 前端 性能 监控 | 发表时间:2014-11-15 09:07 | 作者:bill200711022
出处:http://blog.csdn.net
  作者: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”,就表示数据存储成功。

说明:

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


3). 其它工具配置方法类似,略。

3. 数据展示系统



4. 缺陷

针对移动端的性能监控,目前由于其本身依赖的工具绝大多数只有PC端,在移动端缺乏相应的数据上报工具(特别是移动端本身复杂的网络环境),所以如果想使用ShowSlow作为前端性能监控平台,需要单独实现数据收集系统,而只是将ShowSlow当作展示系统使用。

5. 参考

作者:bill200711022 发表于2014-11-15 1:07:03 原文链接
阅读:386 评论:0 查看评论

相关 [前端 性能 监控] 推荐:

前端性能监控系统ShowSlow

- - CSDN博客Web前端推荐文章
作者:zhanhailiang 日期:2014-11-14. ShowSlow是开源的前端性能监控系统,提供了以下功能:. 前端性能指标数据收集功能:ShowSlow原生提供了数据收集工具. DOM Monster!,但也支持通过YSlow,PageSpeed等第三方工具将性能数据上报给服务端完成收集(其服务器端提供了针对多达8种不同工具上报的数据收集器dommonster,dynatrace,events,har,metric,pagespeed,webpagetest,yslow);.

性能监控

- - 互联网 - ITeye博客
一旦你的服务器是在控制台模式下运行,你就可以开始我们接下来的内容. iostat  iostat 命令用来显示存储子系统的详细信息,通常用它来监控磁盘 I/O 的情况. 要特别注意 iostat 统计结果中的 %iowait 值,太大了表明你的系统存储子系统性能低下. meminfo 和 free  Meminfo 可让你获取内存的详细信息,你可以使用 cat 和 grep 命令来显示 meminfo 信息: 1 cat /proc/meminfo  另外你可以使用 free 命令来显示动态的内存使用信息,free 只是给你大概的内存信息,而 meminfo 提供的信息更加详细.

应用性能监控

- - 人月神话的BLOG
先看下百度里面对应用性能监控的基本定义:. APM = Application Performance Management,应用性能管理,对企业系统即时监控以实现对应用程序性能管理和故障管理的系统化的解决方案. 应用性能管理是一个比较新的网络管理方向,主要指对企业的关键业务应用进行监测、优化,提高企业应用的可靠性和质量,保证用户得到良好的服务,降低IT总拥有成本(TCO).

Elasticsearch性能监控(二)

- -
上一期我们分享了《 Elasticsearch性能监控(一)》,介绍了两个领域的ES监测指标:查询和索引(indexing)性能和内存分配和垃圾回收;本期我们将继续讲解另外三类监测指标:主机级别的系统和网络指标、指标集群健康状态和节点可用性、资源饱和度和相关错误. 本文是Emily Chang的分享《How to monitor Elasticsearch performance》中文译文的第一部分.

前端性能优化

- - JavaScript - Web前端 - ITeye博客
  在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.   一个正常HTTP请求的流程简述:如在浏览器中输入" www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行.

非侵入式监控PHP应用性能监控分析

- - 博学无忧
所谓非侵入式监控PHP应用性能,就是不修改现有系统代码,而对系统进行监控. 这样的系统才能更容易的应用到PHP应用中. 如果只是监控每次请求的访问时间. 在nginx的日志中有两个选项. $request_time 和 $upstream_response_time. 1、$request_time 指的就是从接受用户请求的第一个字节到发送完响应数据的时间,即包括接收请求数据时间、程序响应时间、输出响应数据时间.

Linux性能监控与分析工具

- - CSDN博客系统运维推荐文章
最近需要对一套预研完成的系统性能测试,该系统部署在Linux服务器集群上. 在高并发、高负载场景下收集每台设备资源占用的全部信息(这些信息包括CPU,内存,I/O,磁盘,网络流量等等等),进一步分析系统瓶颈. 这里用上了nmon这款工具. 由nmon负责定期收集全套系统信息,再由nmon_analyser将原始数据转换为可视化的表格与图形.

Linux系统和性能监控

- - zzm
CPU性能表现如何一般从三个方面来衡量:运行队列、利用率和上下文切换. 正如前文所提及的,性能表现的好坏和基线数据(或预期)是密不可分的. 对大部分系统而言,一些基本的性能预期如下:. 运行队列——每个处理器运行队列中不应该超过1-3个线程. 例如,一个双核的系统中,运行队列长度不应该超过6. (译注:即一个系统的load average值不应该大于核数的4倍.

PHP性能监控测试----Xhprof

- - CSDN博客架构设计推荐文章
开始工作到现在,除了做新手任务,基本上都是和服务器端打交道,做前端的时间很短. 目前公司的性能监控和测试:Xhprof和ab测试. Xhprof----facebook开源的,轻量级的PHP性能分析工具: 包括函数的调用次数,花费的时间(自身花费时间和包含内部函数花费的时间),所占内存/CPU,所占内存的峰值及所占百分比.

[Cacti] mongodb性能监控实战

- - CSDN博客数据库推荐文章
          为了更好的使用mongodb,需要监控出mongodb的一些基础使用情况,比如Flush数、连接数、内存使用率、Index操作,Slave延迟等等,这些可以通过配置cacti监控mongodb的模板来完成. 1,在cacti界面导入模板 在计算机本地,下载此tgz包:http://mysql-cacti-templates.googlecode.com/files/better-cacti-templates-1.1.8.tar.gz.