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

  我们在QCon 全球软件开发大会,2018北京站的现场,很荣幸地采访到了来自天润融通的总服务架构师安静波先生,请他来谈谈天润融通在原生云架构呼叫中心的实践与发展。

  AI前线;

  以语音媒介的对话式交互技术是听得懂、讲得出的核心技术。本系列的前四篇文章将围绕着这一技术,由浅入深地讲述相关专业知识和对话技能建设实战。后四篇,将在对话式交互技术的基础上,讲述智能家居的相关技术和实战。相信学习完本系列的读者,可以对对话式交互与智能家居这个领域的相关技术和发展,有非常清晰的认知,甚至入门,更希望有读者能因此而入行,成为我们的战友和同行。

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

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

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

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

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

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

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

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

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

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

  这一事件对于了解页面的可见状态十分有用,举例来说,用户可能会同时打开多个浏览器标签,而你希望只在用户显示你的网站页面时才进行某些操作(比如播放一段音频文件、或是执行一段JavaScript动画),就可以通过这一事件进行触发。对于移动设备来说,如果用户在某个标签中打开了你的网站,但正在另一个标签中浏览其它内容时,这一特性能够节省该设备的电池消耗。(虽然对于你的网站性能来说意义不大)

  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(导航错误日志记录)通过一个接口存储及获取与某个文档的导航相关的错误记录。该标准目前尚未被支持。

  下表列举了当前主流浏览器对性能API的支持,其中标注星号的内容并非来自于Web性能工作小组。

相关阅读