开发一个现代化的互联网网站是一项复杂的任务,需要各种职能的密切合作以应对用户日新月异的需求。其中,网页的性能直接决定了用户的体验,而随着新型客户端浏览设备的出现与网站功能的日益复杂化,对于性能的专注也达到了前所未有的高度。
传统的网站性能监测通常有以下几种方式:
除此之外,以上各种方式的测量指标都比较单一,基本只能起到计时和流量计算的作用。对于其它一些指标,例如电池状态等无能为力。并且难以实现自动化,以及在持续集成流程中统计测试结果。
W3C Web性能工作小组与各浏览器厂商都已认识到性能对于web开发的重要性,为了解决当前性能测试的困难,W3C推出了一套 性能API 标准,各种浏览器对这套标准的支持如今也逐渐成熟起来。这套API的目的是简化开发者对网站性能进行精确分析与控制的过程,最终实现性能的提高。其中还包括了一些新协议与HTML元素的提议,目的是让内容的展现更快、更加优化。
整套标准包含了10余种API,各自针对性能检测的某个方面。为了保证整套标准的质量与互操作性,W3C按照惯例对它们应用了 规范成熟度 流程,这些API各自处于流程的不同阶段。在下图中可以看到它们当前的进展:
以下将通过简单的示例介绍目前已属于W3C推荐标准(REC)的三个API。
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 ,它将替代之前的版本。
该API 规范所定义的JavaScript接口能够提供精确到微秒级的当前时间,并且不会受到系统时钟偏差或调整的影响。对于性能分析来说,精确的测量结果意义重大。
varperf = performance.now(); // console output 439985.4570000316
通过这一 规范 ,网站开发者能够以编程方式确定页面的当前可见状态,从而使网站能够更有效地利用电源与CPU。
当页面获得或失去焦点时,文档对象的 visibilitychange 事件便会被触发。
document.addEventListener('visibilitychange', function(event){if(document.hidden){// Page currently hidden.}else{// Page currently visible.}});
这一事件对于了解页面的可见状态十分有用,举例来说,用户可能会同时打开多个浏览器标签,而你希望只在用户显示你的网站页面时才进行某些操作(比如播放一段音频文件、或是执行一段JavaScript动画),就可以通过这一事件进行触发。对于移动设备来说,如果用户在某个标签中打开了你的网站,但正在另一个标签中浏览其它内容时,这一特性能够节省该设备的电池消耗。(虽然对于你的网站性能来说意义不大……)
下表列举了当前主流浏览器对性能API的支持,其中标注星号的内容并非来自于Web性能工作小组。
规范 | Internet Explorer | Firefox | Chrome | Safari | Opera | iOS Safari | Android |
Navigation Timing | 9 | 31 | 全部 | 8 | 26 | 8 (不包括 8.1) | 4.1 |
High Resolution Timing | 10 | 31 | 全部 | 8 | 26 | 8 (不包括 8.1) | 4.4 |
Page Visibility | 10 | 31 | 全部 | 7 | 26 | 7.1 | 4.4 |
Resource Timing | 10 | 34 | 全部 | - | 26 | - | 4.4 |
Battery Status* | - | 31 (部分支持) | 38 | - | 26 | - | - |
User Timing | 10 | - | 全部 | - | 26 | - | 4.4 |
Beacon | - | 31 | 39 | - | 26 | - | - |
Animation Timing | 10 | 31 | 全部 | 6.1 | 26 | 7.1 | 4.4 |
Resource Hints | - | - | 仅限Canary版 | - | - | - | - |
Frame Timing | - | - | - | - | - | - | - |
Navigation Error Logging | - | - | - | - | - | - | - |
WebP* | - | - | 全部 | - | 26 | - | 4.1 |
Picture element and srcset attribute * | - | - | 38 | - | 26 | - | - |
DZone.com在《Performance & Monitoring 2015》这份白皮书中专门介绍了性能API以及W3C所推荐的新协议、标准及HTML元素,并提供了简单的示例。可以在 这里 下载完整的白皮书(需要注册)。本文中的示例代码即来自于该白皮书。
如果想了解有关Web性能API的更多内容,可以参考 W3C官方文档 或这篇 博客 。
感谢徐川对本文的审校。
给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ,@丁晓昀),微信(微信号: InfoQChina )关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入InfoQ读者交流群 )。