微信号:infoqchina

介绍:有内容的技术社区媒体

Web性能API——帮你分析前端性能

2015-06-15 12:21 邵思华 译


开发一个现代化的互联网网站是一项复杂的任务,需要各种职能的密切合作以应对用户日新月异的需求。其中,网页的性能直接决定了用户的体验,而随着新型客户端浏览设备的出现与网站功能的日益复杂化,对于性能的专注也达到了前所未有的高度。

传统的网站性能监测通常有以下几种方式:

借助传统的开发者工具查看网络请求,例如浏览器的F12工具、FiddlerCharles等等。基本方式是通过追踪HTTP请求与响应的时间,以图形的方式列出所有资源的下载情况。这种方式依赖于人为操作,难以实现批量测试与统计。


使用侵入式的JavaScript代码检测DOM事件的发生时间。例如DOMContentLoaded和document.onreadystatechange等等。这种方式会在页面中引入额外的代码,加重了开发者与测试人员的负担,还有可能因为检测代码本身的潜在问题影响页面的性能。


使用第三方的服务与工具,例如WebPagetestPingdom等等,这些服务通常能够实现在不同浏览器和不同地域进行测试,并且为用户提供一些优化建议。但某些服务需要排队等待,并且多次测试结果之间往往区别较大。第一条方式的问题也同样存在。


除此之外,以上各种方式的测量指标都比较单一,基本只能起到计时和流量计算的作用。对于其它一些指标,例如电池状态等无能为力。并且难以实现自动化,以及在持续集成流程中统计测试结果。

W3C Web性能工作小组与各浏览器厂商都已认识到性能对于web开发的重要性,为了解决当前性能测试的困难,W3C推出了一套性能API标准,各种浏览器对这套标准的支持如今也逐渐成熟起来。这套API的目的是简化开发者对网站性能进行精确分析与控制的过程,最终实现性能的提高。其中还包括了一些新协议与HTML元素的提议,目的是让内容的展现更快、更加优化。

性能API示例


整套标准包含了10余种API,各自针对性能检测的某个方面。为了保证整套标准的质量与互操作性,W3C按照惯例对它们应用了规范成熟度流程,这些API各自处于流程的不同阶段。在下图中可以看到它们当前的进展:

以下将通过简单的示例介绍目前已属于W3C推荐标准(REC)的三个API:

Navigation Timing (导航计时)

Navigation Timing API能够帮助网站开发者检测真实用户数据(RUM),例如带宽、延迟或主页的整体页面加载时间。开发者可以用以下JavaScript代码检测页面的性能:


varpage = performance.timing,plt = page.loadEventStart - page.navigationStart,console.log(plt);// Page load time (PTL) output for specific browser/user in ms


需要注意的是,Navigation Timing的目的是用于分析页面整体性能指标。如果要获取个别资源(例如JS、图片)的性能指标,请使用Resource Timing API。

W3C刚刚宣布了Navigation Timing 2,它将替代之前的版本。


High Resolution Timing(高精度计时)


该API规范所定义的JavaScript接口能够提供精确到微秒级的当前时间,并且不会受到系统时钟偏差或调整的影响。对于性能分析来说,精确的测量结果意义重大。


varperf = performance.now();// console output 439985.4570000316


Page Visibility (页面可见性)

通过这一规范,网站开发者能够以编程方式确定页面的当前可见状态,从而使网站能够更有效地利用电源与CPU。


当页面获得或失去焦点时,文档对象的visibilitychange事件便会被触发。


document.addEventListener('visibilitychange', function(event){if(document.hidden){// Page currently hidden.}else{// Page currently visible.}});


这一事件对于了解页面的可见状态十分有用,举例来说,用户可能会同时打开多个浏览器标签,而你希望只在用户显示你的网站页面时才进行某些操作(比如播放一段音频文件、或是执行一段JavaScript动画),就可以通过这一事件进行触发。


对于移动设备来说,如果用户在某个标签中打开了你的网站,但正在另一个标签中浏览其它内容时,这一特性能够节省该设备的电池消耗。(虽然对于你的网站性能来说意义不大……)


其他部分API功能简介


Resource Timing(资源计时)——对单个资源(如图片)的计时,可以对细粒度的用户体验进行检测。


Performance Timeline(性能时间线)——以一个统一的接口获取由Navigation Timing、Resourcing Timing和User Timing所收集的性能数据。


Battery Status(电池状态)——能够检测当前设备的电池状态,例如是否正在充电、电量等级等等。可以根据当前电量决定是否显示某些内容(例如视频、动画等等),对于移动设备来说非常实用。


User Timing(用户计时)——可以对某段代码、函数进行自定义计时,以了解这段代码的具体运行时间,类似于stop watch的作用。


Beacon(灯塔)——可以将分析结果或诊断代码发送给服务器,它采用了异步执行的方式,因此不会影响页面中其它代码的运行。对于收集测试结果并进行统计分析来说是一种十分便利的工具。


Animation Timing(动画计时) - 通过requestAnimationFrame函数让浏览器精通地控制动画的帧数,能够有效地配合显示器的刷新率,提供更平滑的动画效果,减少对CPU和电池的消耗。


Resource Hits(资源提示) - 通过html属性指定资源的预加载,例如在浏览相册时能够预先加载下一张图片,加快翻页的显示速度。


Frame Timing(帧计时)——通过一个接口获取与帧相关的性能数据,例如每秒帧数和TTF。该标准目前尚未被支持。


Navigation Error Logging(导航错误日志记录)——通过一个接口存储及获取与某个文档的导航相关的错误记录。该标准目前尚未被支持。


感谢徐川对本文的审校。

号外:“运维”专题の线上活动终于来了!




支付宝携程事件后,InfoQ也如之前报道中所述,一直在策划“运维”相关专题。


针对本次事件复盘,我们特别策划了一场讨论沙龙,届时将有触控科技运维专家萧田国,环信首席架构师梁宇鹏,腾讯互娱运营管理中心总监刘栖桐等技术大牛针对“运维”展开讨论。


由于考虑到有朋友可能不在京,或者比较忙无法到现场,此次活动我们特设了线上直播免费互动参与等方式,详情请手动识别二维码,添加关注回复“616”即可报名免费参与!





回复关键词查看对应内容:

React | 架构师 | 运维 | 云 | 开源 | Kubernetes | 架构 | 人工智能 | Kafka | Docker | Netty | CoreOS | QCon | Github | Swift | 敏捷 | 语言 | 程序员 | 实践 | 物联网 |




如果想要评论本篇文章,直接戳右下角的“评论”发表观点和建议,我们一直在寻找的技术人中的KOL,也许就是你!


版权及转载声明:


极客邦科技专注为技术人提供优质内容传播。尊重作者、译者、及InfoQ网站编辑的劳动,所有内容仅供学习交流传播,不支持盗用。未经许可,禁止转载。若转载,需予以告知,并注明出处。


 
InfoQ 更多文章 Facebook如何实现PB级别数据库自动化备份 学术派Google软件工程师Matt Welsh谈移动开发趋势 Spotify为什么要使用一些“无聊”的技术? 妹纸们放假了,汉纸们做啥? 大多数重构可以避免
猜您喜欢 浅谈分布式计算的开发与实现(1) AndroidShareGroup技术周报(第三期) 产品经理如何进行数据分析.[交流] “超级月亮”撞上月全食,月亮很大,优惠也很大! Android样式的开发:Property Animation篇