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

前端性能统计必备api，有不知道的吗？

正文从这开始～

开发一个现代化的互联网网站是一项复杂的任务，须要各类职能的密切合做以应对用户突飞猛进的需求。其中，网页的性能直接决定了用户的体验，而随着新型客户端浏览设备的出现与网站功能的日益复杂化，对于性能的专一也达到了史无前例的高度。

传统的网站性能监测一般有如下几种方式：

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

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

使用第三方的服务与工具，例如WebPagetest、Pingdom等等，这些服务一般可以实如今不一样浏览器和不一样地域进行测试，而且为用户提供一些优化建议。但某些服务须要排队等待，而且屡次测试结果之间每每区别较大。第一条方式的问题也一样存在。

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

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

性能API示例

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

如下将经过简单的示例介绍目前已属于W3C推荐标准（REC）的三个API。

Navigation Timing （导航计时）

NavigationTiming API可以帮助网站开发者检测真实用户数据（RUM），例如带宽、延迟或主页的总体页面加载时间。开发者能够用如下JavaScript代码检测页面的性能：须要注意的是，Navigation Timing的目的是用于分析页面总体性能指标。若是要获取个别资源（例如JS、图片）的性能指标，请使用Resource Timing API。

W3C刚刚宣布了NavigationTiming 2，它将替代以前的版本。

High Resolution Timing（高精度计时）

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

Page Visibility （页面可见性）

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

当页面得到或失去焦点时，文档对象的visibilitychange事件便会被触发。这一事件对于了解页面的可见状态十分有用，举例来讲，用户可能会同时打开多个浏览器标签，而你但愿只在用户显示你的网站页面时才进行某些操做（好比播放一段音频文件、或是执行一段JavaScript动画），就能够经过这一事件进行触发。对于移动设备来讲，若是用户在某个标签中打开了你的网站，但正在另外一个标签中浏览其它内容时，这一特性可以节省该设备的电池消耗。（虽然对于你的网站性能来讲意义不大……）

其它部分API功能简介

Resource Timing（资源计时）——对单个资源（如图片）的计时，能够对细粒度的用户体验进行检测。

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

BatteryStatus（电池状态）——可以检测当前设备的电池状态，例如是否正在充电、电量等级等等。能够根据当前电量决定是否显示某些内容（例如视频、动画等等），对于移动设备来讲很是实用。

User Timing（用户计时）——能够对某段代码、函数进行自定义计时，以了解这段代码的具体运行时间，相似于stop watch的做用。

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

Animation Timing（动画计时） - 经过requestAnimationFrame函数让浏览器精通地控制动画的帧数，可以有效地配合显示器的刷新率，提供更平滑的动画效果，减小对CPU和电池的消耗。

Resource Hits（资源提示） - 经过html属性指定资源的预加载，例如在浏览相册时可以预先加载下一张图片，加快翻页的显示速度。

Frame Timing（帧计时）——经过一个接口获取与帧相关的性能数据，例如每秒帧数和TTF。该标准目前还没有被支持。

NavigationError Logging（导航错误日志记录）——经过一个接口存储及获取与某个文档的导航相关的错误记录。该标准目前还没有被支持。