W3C规范成熟不同阶段的Web性能API参考原创
以下每个性能API都处于W3C规范成熟过程的不同阶段(你可以在标题旁边看到每个规格的阶段)。
使用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的总加载时间:
除了主页的性能(通过导航计时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);
}
信标-工作草案阶段
使用信标API,你可以将分析或诊断代码从用户代理发送到服务器。通过异步发送,你将不会阻止页面的渲染。
navigator.sendBeacon(“http://mywebserver.com”, ‘any information you want to sent’);
动画时间-编辑草案阶段
此规范将引入requestAnimationFrame,而不是使用setTimeOut或setInterval创建动画。这种方法允许浏览器控制它可以渲染多少帧;旨在匹配屏幕的刷新率(通常为60fps)将带来无日语体验。如果页面失去可见性(例如,用户切换选项卡),它还可以限制动画,从而大幅降低功耗和CPU使用率。
查看微软的演示页面,将setTimeOut与requestAnimationFrame进行比较。
资源提示-编辑草案阶段
预测性浏览是为你的用户提供他们接下来想要看到或检索的内容的绝佳方式。
“预浏览”是指试图预测用户使用您的页面的活动——即在用户请求之前,我们可以加载什么吗?此规范将允许开发人员向用户代理提示资源的下载优先级。
以下预浏览属性旨在帮助您在页面上预加载资产。
帧时间(尚不支持)-编辑草案阶段
该规范定义了一个界面,通过允许Web开发人员访问每秒帧和帧时间等测量来衡量其应用程序的帧性能。– W3C
导航错误记录(尚不支持)-编辑草案阶段
该规范定义了一个接口,用于存储和检索与文档之前导航相关的错误数据。– W3C