Xvfb+YSlow+ShowSlow搭建前端性能测试框架

　　工具介绍

　　Xvfb: 主要就是通过内存计算模拟出图形界面，没有平常所见的操作界面，分为客户端和服务器

　　YSlow: 当Firefox浏览网页时，可以分析网站的页面(基于Yahoo 14条评分原则)，并指出如何进行优化提高网站性能

　　ShowSlow:收集YSlow的测试结果并显示出来

　　Ubuntu：开源的Linux系统，界面越来越向Windows靠近

　　框架简介

　　对于前端的童鞋我相信YSlow已经耳熟能详了，基于雅虎的评分规则对页面进行评分的Firefox插件，从中我们可以看出我们页面上的很多不足，并且可以知道我们如何改进和优化，配合将测试报告发送到本地的ShowSlow平台以提供给开发人员随时查看。在Xvfb的辅助下，这个框架最大的优点就是可以在无显示设备的环境下稳定运行!

　　环境配置

　　典型的LAMP配置，网上资料很多，当然你也可以点此围观

　　搭建本地ShowSlow测试平台

　　这个我之前在Windows Server 2003搭建过(点此围观)，但是这次在Ubuntu下还是有所区别的(所有命令都在终端输入)

　　sudo mkdir /var/www/showslow (建立一个空文件夹)sudo svn checkout http://showslow.googlecode.com/svn/trunk/ /var/www/showslow (将ShowSlow的源代码下载到本地，这一步会报错连接不上http://svn.facebook.com，首先要感谢国家，其次要感谢功夫网，最后我要说的是无视…)sudo mv config.sample.php config.php (修改文件夹名)sudo gedit config.php根据实际情况修改$db,$user,$pass可以根据实际情况修改按照上一步修改的数据创建相应的Mysql数据库

　　//以root用户权限进入mysql

　　mysql -uroot -p

　　//创建一个数据库，名字和第二步你填写的保持一致

　　create database ‘DBName‘;

　　//切换到新建的数据库

　　use ‘DBName’;

　　// 将ShowSlow文件夹的tables.sql(数据库表)导入到新建的数据库中，注意无分号

　　source /var/www/showslow/tables.sql

　　//查看下是否导入成功了，貌似有个表名叫ShowSlow2，汗

　　show tables;

　　自动化脚本

　　这个是我们这个框架最重要的部分，具体请参考Sergey Chernyshev的博客以及自动化脚本作者Aaron Kulick ，现在最新的Showslow的子文件夹automation有三个文件――monitor.sh (配置文件) test_harness.pl (自动化脚本) ReadMe(框架说明文件，强烈推荐各位童鞋仔细阅读，因为这关系到后面脚本的修改问题)

　　Xvfb

　　sudo apt-get install xvfb

　　Xvfb :1 -screen 0 1152×864x24 +extension RANDR

　　我在此处发现报错：[dix] Could not init font path element /usr/share/fonts/X11/cyrillic, removing from list!

　　通过Google大神的帮助，解决办法很简单，安装这个需要的字体――sudo apt-get install xfonts-cyrillic

　　创建一份测试页面列表

　　sudo gedit /var/www/URLs (在Apache下新建一个URLs列表，注意每一个链接为单独的一行)

　　创建一份Firefox测试专用的Profiles

　　/usr/lib/firefox-3.6.3/firefox -profilemanager

　　首先我们要修改Firefox的application.ini文件最后一段，避免Firefox崩溃后发送报告

　　[Crash Reporter]

　　Enabled=0

　　其次就是修改测试专用的Profiles的prefs.js，这个很关键，要设置一些Firefox属性才能让测试更好的进行下去，ShowSlow的论坛有推荐配置，(猛击这里)

　　gedit /home/eric/FFProfiles/prefs.js

　　## PREFS.JS RECOMMENDATIONS (AUTOMATION)

　　#do not let automated firefox manipulate the profile extensions (auto

　　update)

　　user_pref(“extensions.update.enabled”, false);

　　user_pref(“extensions.update.notifyUser”, false);

　　#disable session restore on crash (do not want stale/old tabs)

　　user_pref(“browser.sessionstore.resume_from_crash”, false);

　　#do not let javascript resize the window

　　user_pref(“dom.disable_window_move_resize”, true);

　　#do not let javascript manipulate context menus (automation)

　　user_pref(“pref.advanced.javascript.disable_button.advanced”, false);

　　#do not show me pop-up block messages (screenshot related)

　　user_pref(“privacy.popups.showBrowserMessage”, false);

　　#do not warn for weak SSL or mixed SSL/HTTP content:

　　user_pref(“security.warn_entering_weak”, false);

　　user_pref(“security.warn_viewing_mixed”, false);

　　#firebug prefs

　　user_pref(“extensions.firebug.allPagesActivation”, “on”);

　　user_pref(“extensions.firebug.net.enableSites”, true);

　　user_pref(“extensions.firebug.defaultPanelName”, “YSlow”);

　　user_pref(“extensions.firebug.previousPlacement”, 1);

　　#yslow prefs

　　user_pref(“extensions.yslow.autorun”, true);

　　user_pref(“extensions.yslow.beaconInfo”, “grade”);

　　user_pref(“extensions.yslow.beaconUrl”, “http://localhost/showslow/beacon/yslow/“);

　　user_pref(“extensions.yslow.optinBeacon”, true);

　　配置本地YSlow

原文转自：http://blogread.cn/it/article/2005?f=sa