网络性能API参考》（The Web Performance APIs Reference

性能是W3C网络性能工作组的一个重要焦点。请查看这些API，它们为网络性能和W3C标准提供了参考。

以下每个性能 API在W3C的规范成熟度过程中处于不同阶段。你可以在标题旁边看到每个规范的阶段。请访问这篇文章，了解所有性能API成熟度的简明图表。

使用API来提高性能

如果你正积极地想知道为什么你需要首先考虑将API纳入你的系统，你并不孤单。很多人都质疑API的重要性，以及为什么他们一开始就需要关注它们。他们有许多问题，但答案都可以归结为这样一个事实：API提供了真实的数据，程序员可以用它来判断自己的表现。

现实情况是，大多数程序员都是以数字为导向的人，他们喜欢看自己的工作对他们试图完成的整个项目有什么贡献。API使他们能够更容易地跟踪这些数字，而这正是完成项目所需要做的事情。他们使用的每一个API都有助于整个项目的巨大成功。

导航定时 - W3C推荐

导航计时API有助于测量真实的用户数据（RUM），如带宽、延迟或主页面的整体加载时间。下面是开发者如何通过性能计时界面，通过JavaScript检查页面的性能。

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

导航计时涵盖了整个页面的指标。要收集关于单个资源的指标，你将使用列表中进一步解释的资源计时API。

高分辨率计时 - W3C推荐

高分辨率计时API支持浮点时间戳，并提供微秒级的细节测量，因此它不受系统时钟偏移或调整的影响。

var perf = performance.now();
// console output 439985.4570000316

页面可见性--W3C建议

每当页面获得或失去焦点时，本规范创建的可见性变化事件就会在文档中触发。这个事件对于以编程方式确定页面的当前可见性状态非常有帮助。例如，如果你的用户有几个浏览器标签打开，而你不希望特定的内容被执行（如播放视频，或在旋转木马中旋转图片），就可以应用该API。

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

资源定时 - 候选人推荐

资源计时API让你更深入地了解页面中每个单独资源的行为。作为一个例子，让我们选择DZone的标志，并检索总的加载时间（ms）。

var img = window.performance.getEntriesByName(“http:// cdn.dzone.com/static/images/TOP_NAV_LOGO.png”)[0]; var total = parseInt(img.responseEnd - img.startTime); console.log(total); // output e.g. 281 (in ms)

除了主页面的性能（通过Navigation Timing API），你还可以在更细的基础上（即以资源为基础）跟踪真实的用户体验。

性能时间线--候选建议

性能时间线规范定义了一个统一的接口，以检索通过导航计时、资源计时和用户计时收集的性能数据。

// gets all entries in an array
var perf = performance.getEntries(); for (var i = 0; i < perf.length; i++) {
console.log(“Asset Type: “ + perf[i].name + “ Duration: “ + perf[i].duration + “\n”); }

电池状态--候选建议

这个API提供了对用户的电池驱动设备的电池状态的访问。你可以访问的具体指标是充电、充电时间、放电时间和水平。事件也可以根据这些状态来触发。

var battery = navigator.battery || navigator. webkitBattery || navigator.mozBattery || navigator. msBattery;
if (battery) {
console.log(“Battery charging? “ + battery.charging ? “Yes” : “No”);
console.log(“Battery level: “ + battery.level * 100 + “ %”);
console.log(“Battery charging time: “ + battery. chargingTime + “ seconds”);
console.log(“Battery discharging time: “ + battery. dischargingTime + “ seconds”);
});

用户计时 - 候选人推荐

通过用户计时API，你可以设置标记来测量你的应用程序的特定块或功能。计算出来的耗时可以作为性能好坏的一个指标。

performance.mark(“start”);
loadSomething();
performance.mark(“end”); performance.measure(“measureIt”, “start”, “end”); var markers = performance.getEntriesByType(“mark”); var measurements = performance. getEntriesByName(“measureIt”); console.log(“Markers: “, markers); console.log(“Measurements: “, measurements); function loadSomething() {
// some crazy cool stuff here :)
console.log(1+1);
}

信标--工作草案

通过beacon API，你可以从用户代理向服务器发送分析或诊断代码。通过异步发送，你不会阻碍页面的渲染。

navigator.sendBeacon(“http://mywebserver.com”, ‘any information you want to sent’);

动画计时--编辑草案

本规范将引入 requestAnimationFrame，而不是使用 setTimeOut 或 setInterval 来创建动画。这个方法让浏览器控制它可以渲染多少帧；以配合屏幕的刷新率（通常是60fps）为目标，会带来无干扰的体验。如果页面失去可见性（例如，用户切换标签），它还可以节制动画，极大地降低了功耗和CPU的使用。

查看微软的演示页面，比较setTimeOut与requestAnimationFrame。

资源提示--编辑草案

预先浏览是一个很好的方法，可以准确地为你的用户提供他们接下来想看或检索的内容。"预先浏览 "是指试图预测用户在你的页面上的活动--即在用户请求之前，我们是否有什么东西可以加载？本规范将允许开发者向用户代理提示资源的下载优先级。

以下的预浏览属性是为了帮助你在页面上预加载资产。

<link rel=”dns-prefetch” href=”//host_to_resolve.com”> <link rel=”subresource” href=”/javascript/mydata. json”>
<linkrel=”prefetch” href=”/images/labrador.jpg”> <link rel=”prerender” href=”//example.org/page_2. html”>

帧计时（尚不支持）--编辑草案

该规范定义了一个接口，以帮助Web开发人员测量他们的应用程序的帧性能，让他们能够访问每秒帧数和帧时间等测量值。- W3C

导航错误记录（尚不支持）--编辑者的草案

该规范定义了一个接口，用于存储和检索与文档的先前导航相关的错误数据。- W3C

浏览器支持

关于所有这些标准的浏览器支持情况的图表，请访问这篇博文并向下滚动到浏览器支持概述。要了解即将出台的标准，最好的方法是订阅网络性能工作组的邮件列表，以了解任何与性能有关的更新。

网络性能API参考教程