注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Jon的毛线球

叩首问路,码梦维生。

 
 
 

日志

 
 

前端性能检测简介  

2015-09-22 12:05:12|  分类: 前端性能监控 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

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

前端性能检测简介 - 毛线球 - Jon的毛线球

 


 

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

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

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

试完了一下,感觉很高级,哈哈,截图如下:

前端性能检测简介 - 毛线球 - Jon的毛线球

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

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

前端性能检测简介 - 毛线球 - Jon的毛线球


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


前端性能检测简介 - 毛线球 - Jon的毛线球
 
  评论这张
 
阅读(18)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017