需要注意的是性能并不是一个目标，而是开发、测试过程中需要持续关注的问题 。我们有自动化的工具和框架在开发时进行优化，同样可以借助工具在测试时进行性能测试 。
这里推荐一个同样是基于PhantomJS的工具Phantomas,它能运行测试页面获取很多性能指标，加载时间、页面请求数、资源大小、是否开启缓存和Gzip、选择器性能、dom结构等等诸多指标都能一次性得到，并且有相应的grunt插件 。你也可以对检测指标进行二次开发，例如移动端定义一个最大图片大小的规则，在开发的时候如果使用了超过限制的大图则进行告警 。不过如果把加载过程中的时间点作为常规的测试监控，则最好模拟移动端网络环境 。
页面特征检测与实践
前面讲到性能测试中测试资源大小其实就属于一种资源特征，诸如此类我们还可以开发一些通用的测试规则，以测试页面是否正常 。这种测试主要适用于在界面和操作上无法直接进行判断的元素 。例如页面中广告部署是否正常 。
广告部署检测实践
第三方部署广告以及物料配置的时候容易出现问题，例如代码脚本升级出错、部署错误、物料尺寸格式不对、广告容器未适配多种屏幕大小、广告是否可见、时效广告是否展现等 。已知的问题就有很多，如果出现问题时由广告系统的人员挨个检测是一个很耗费人力的过程 。而这些特征都是跟实际运行环境相关的，大部分都可以通过casperjs之类的工具来进行检测 。
另外与广告相关的还有屏蔽检测等，检测页面div广告区块(非iframe广告)是否被拦截插件所拦截 。由于拦截插件使用的基本相同的拦截规则，而且对于div广告采用的是选择器屏蔽，检测过程中只需要根据相关的检测规则判断选择器是否存在页面中即可 。这在casperjs中一个api即可搞定:
if(casper.exist(selector)){ casper.captureSelector(filename,selector);}这样便能直接截图被拦截的区域了 。
与自动化测试的结合
回到刚才的需求，如何通过casperjs实现这些检测需求呢 。casperjs支持执行JS来获取返回结果：
this.page.evaluate(function(text) { $("#ueditor_replace").text(text); $("a.poster_submit").click();//点击提交},text);而且可以主动注入jquery或者zepto等框架，这样你就可以以非常简单的方式来操作分析dom元素了 。例如根据html结构特征获取部署类型、自动扫描广告检测容器宽度、获取广告的选择器来进行截屏等 。如果页面有报错可以通过casper的api进行监听：
casper.on("page.error", function(msg, trace) {
this.echo(msg,'WARNING');
//详细错误信息
if(trace){
this.echo("Error: " + msg, "ERROR");
this.echo("file: " + trace[0].file, "WARNING");
this.echo("line: " + trace[0].line, "WARNING");
this.echo("function: " + trace[0]["function"], "WARNING");
}
});
还能捕获网络请求分析死链或者广告请求：
//记录所有请求casper.on('resource.requested', function(req,networkRequest) { //do something});更加赞的是你还可以进入到跨域的iframe里面去进行操作！
casper.withFrame(id/name,function(){ //now you are inside iframe})注意: iframe操作时推荐用name，id有时候会发生错位 。
检测示例：
文章插图
可以说有这么赞的工具你能轻松实现很多意想不到的需求！
配置化减小成本
在开发了检测工具之后，当然要想办法减小使用成本，如上面例子中，只需将广告检测的一些规则和检测页面进行配置化，用户使用的时候只需要关注需要测试哪些页面而已 。工具会根据用户提交配置自动运行并将结果返还给用户 。
与CI的结合
讲到这里，上面这些步骤很像ci系统啦！如果能通过ci实现一系列的自动化部署测试等工作，使用上就更加顺畅了 。
谈起ci肯定要介绍jenkins,稳定可靠，是很多大公司ci的首选 。只是在前端的眼中它看起来会感觉 。。丑了点和难用了点 。。如果能像travis-ci那样小清新和直观易用该多好哈哈 。
当然如果你要自己实现一套类似ci的流程也不复杂，因为对于上面提到的自动化测试来说只需要一个队列系统处理批量提交的测试任务然后将运行结果反馈给用户即可 。当然前端测试可能对于自定义的报表输出要求更高点 。如果你想实现一套，使用laravel和beanstalkd能快速搭建一套完善的队列系统，laravel已经提供很多内置支持 。各个服务的运行结果输出成html报表，就能实现一套轻量级且支持自定义展现的ci系统了 。这方面有很多教程，可以自行搜索 。
推荐阅读
- 苹果|iOS 16测试机首次现身：新UI适配iPhone 14
- 前端实现 SVG 转 PNG
- 网站渗透测试案例分享-WordPress网站
- Web渗透测试
- APP安全检测 渗透测试APP服务介绍与过程
- 网站渗透测试原理及详细过程
- 做网站渗透测试，可以从哪方面入手？
- 你适合戴手表还是戴手镯？4个动作来测试，别傻傻戴错了
- 前端：html+css+javascript 手把手教大家编写贪吃蛇小游戏
- 2019年最流行的五大JavaScript 自动化测试框架