搭建showslow:前端性能跑分及优化工具

　　综述：showslow是一个开源的工具，集成并通过Yahoo yslow、google page speed、dynaTrace AJAX等工具监测网站各项性能指标，然后通过图表和排名展示出来。

1. 工具软件

　说明：showslow是典型的linux + apache + php + mysql结构。（当然在windows\mac也可以运行）

　我是在Mac Air 上搭建的环境，Mac 跟Linux 搭建步骤差不多啦。

　软件准备：

　　1）mysql和apache软件没有版本要求，去官网下载最新版本即可。我使用的是apache2.4 mysql5.6.24

　　2）showslow 官网目前最新版本是1.2.2，官网对php的要求是5.3.3。经测试以及n次验证，目前最新5.6.9版本的php，会有兼容性问题，建议使用php5.4.41之前的版本（这是经验，php不要使用超过5.4.41版本。因为showslow1.2.2 php文件数据库扩展和加密扩展的接口方法已经在php5.6.9版本中弃用了，不支持了）。对于php5.3、5.4、5.5、5.6版本的不同，请自行搜索。当然如果精通php，能修改showslow软件里面的php文件相关接口，另当别论。

　　3）浏览器：准备firefox，以及应用扩展（firebug、yslow、pagespeed）。

2. 环境搭建

　由于手头只有Mac Air，所以本文档仅适用用Mac和Linux，windows 用户参考即可。

2.1 apache安装

　apache使用2.4版本，编译安装网络上文档太多了，就不描述了。

　apache2.4编译安装之前，需要预先安装好apr、apr-util。

cd httpd-2.4
sudo ./configure --with-apr=/path --with-apr-util=/path
sudo make
sudo make install 

2.2 mysql安装

　mysql安装，参考网络吧。showslow对mysql的版本没有要求。

　show slow官网建库和建用户语句：

mysql> create database showslow;
mysql> grant usage on showslow.* to showslowuser@localhost identified by '... database-password ...';
mysql> grant all privileges on showslow.* to showslowuser@localhost;
mysql> quit

2.3 php安装

　经过多次验证，php5.4.41版本对于show slow是OK的。(不要使用5.4.41以上的版本，5.5 5.6 版本的php肯定报错）

　官网下载地址：http://125.39.35.133/files/21010000065E74D3/cn2.php.net/distributions/php-5.4.41.tar.gz

　Mac/Linux编译过程：　

sudo CFLAGS="-O3 -fPIC" ./configure --prefix=/usr/local/php  --with-mysqli=/usr/local/mysql/bin/mysql_config --with-mysql=/usr/local/mysql --with-apxs2=/usr/local/httpd-2.4./bin/apxs --with-libxml-dir=/usr/local/libxml2-2.9./ --with-pcre-dir=/usr/local/pcre-8.37/ --with-config-file-path=/etc --with-jpeg-dir --with-png-dir --with-mcrypt --with-mhash --with-curl --with-openssl -enable-mbstring --enable-debug --enable-ftp --enable-zip --enable-exif --enable-sockets --enable-safe-mode
sudo make
sudo make install

说明：

　　1）php的mysqli、mcrypt、curl、mbstring对于showslow是必需的。

　　2）在Mac上编译报错：ld:symbol(s) not found for architecture x86_64. clang:error:linker command failed with exit code 1 (use -v to see invocation)。编译的时候增加 CFLAGS="-O3 -fPIC"即可。

编译php后，进入httpd的配置文件httpd.conf  编辑设置：LoadModule php5_module modules/libphp5.so

并增加：

<IfModule mod_php5.c>
        AddType application/x-httpd-php .php
        AddType application/x-httpd-php-source .php5
</IfModule>

2.4 firefox浏览器以及各种附加组件安装

安装firefox浏览器，并安装yslow\page speed插件。（firebug 这个就不说了，地球人都知道）

2.4.1 yslow的安装

　 在firefox插件中进行搜索，然后安装即可。主要是配置插件：（firefox地址栏中输入：about:config )

• extensions.yslow.beaconUrl = http://localhost/showslow/beacon/yslow/      （作用主要是将yslow的数据传送到本地的showslow数据库中）
• extensions.yslow.beaconInfo = grade
• extensions.yslow.optinBeacon = true

2.4.2 pagespeed 的安装

　这个插件坑苦我了，怎么也没弄好。其数据无法传送到本地！也记录下相关过程。

　　1）pagespeed 插件安装教程：http://www.showslow.org/Configuring_Page_Speed

　　2）showslow的配置文件：config.php  中有个配置：$pageSpeedOnlineAPIKey = '<your-code-goes-here>';  这个是调用google pagespeed online api。其安装教程（官网）：http://www.showslow.org/Configuring_Page_Speed_Online_API  （哈哈，没看明白，没看明白，按照这个做了，但是数据依然无法传送到本地）

　　3）上面提到了google pagespeed API，那么这个API key 去哪里找啊？ 嗯，官网申请。 其教程为：http://starrguide.com/pagespeed-online-api-key/

　　4）show slow pagespeed的功能没弄好，求大神！

2.5 showslow安装

1. 在showslow目录下，复制config.sample.php to config.php

2.修改config.php

$db = 'showslow';
$user = 'showslowuser';
$pass = '... database-password ...';
$host = 'localhost:/var/lib/mysql/mysql.sock';

3.执行make .

2.6 其他说明

　　由于我没有windows系统，无法安装dynaTrace rank。

　　showslow.com官网的截图如下：

2.7 My showslow show:

最后我搭建的show slow环境只有yslow的功能，需要在研究！