前端性能监控总结

前端性能监控主要分为非侵入式和侵入式两种；为什么这样划分，因为是收集数据的方式和目标不一样。

【非侵入式】，用到的工具主要是Yslow，Pagespeed，Dynatrace，Fiddler等工具，主要是检测页面上雅虎前端优化的规则。通过这些工具的信息，可以快速定位需要优化的点。这部分应该是由测试工程师来做，但是很多公司没有前端测试的模块，所以这个工作就由开发工程师自己完成，优化前端性能也是前端工程师工作中重要的一部分。随着业务的复杂度，页面数量的增多，测试结果展示可以使用一些工具收集起来，比如showslow（具体参考Xvfb+YSlow+ShowSlow搭建前端性能测试框架），使用相关脚本还可以进行自动化测试，稍为玩了一下。截图如下：

可以添加一个URL列表，自动测试所有添加的页面，测试结果一目了然。还有一个好处是在Firefox里面装一个GreaseMonkey，编写自定义js行为，例如登录。这种自动化的方式也可以做上线后的监控，只是UA比较单一，抽样用户，网络环境等，不具有一般性。

 

D2上淘宝和百度使用了PhantomJs，新浪微博用的是貘吃馍香写的berserkJS，原理大概就是内置一个webkit内核的浏览器，调用一些接口实现如下功能:

• 监测页面的网络请求，收集目标数据
• 首次渲染时间与首屏渲染时间监控
• 操作页面运行沙箱内DOM对象与JS
• 模拟用户鼠标操作
• 操作内置webkit浏览器
• 网页截图与文件读写
• HTTP请求与启动外部进程操作等

试完了一下，感觉很高级，哈哈，截图如下：

这样能做的事情就很多了，可以自定需要的数据，自定义数据格式，实时生成HAR等，为后期做数据分析提供了很好的数据样本。当然，缺点也很明显，和上面浏览器数据收集一样，非用户数据来路，非多UA数据，数据比较单一。

【侵入式】的数据收集方式主要是指内置监控代码放在页面内，可以使用打点计时的方式收集用户的信息，然后上传到统计平台进行统计分析。

如果是高级浏览器（Chrome11+,Firefox7+,IE9+）可以采用HTML5的performanceTiming API统计一些信息，如isDirectClientCache，navigationType，redirectCount，redirectTime，domainLookupTime，connectTime，requestTime，responseTime，domParsingTime，resourcesLoadedTime，firstPaintTime，domContentLoadedTime，windowLoadedTime等数据