9-2专项测试下午
1. w3c performance
w3c performance是关于性能的统计指标。
w3c是一个官方组织，负责给所有的浏览器厂商指定标准。早年也是为了解决性能问题，要求所有的浏览器都必须支持一个性能的API。这个API在2013年就已完善并被浏览器厂商实现。2013年之前，测试性能还是听困难的，2013年以后，所有浏览器都提供了一个接口允许检索浏览器的加载情况，所以我们可以借助它去分析w3c性能测试API是如何使用的。
搜索w3c performance
在w3c里面github地址，有所有性能的指标的规范，如
https://w3c.github.io/hr-time/
https://w3c.github.io/performance-timeline/
https://w3c.github.io/resource-timing/
https://w3c.github.io/navigation-timing/
https://w3c.github.io/user-timing/
https://w3c.github.io/page-visibility/
https://w3c.github.io/requestidlecallback/
https://w3c.github.io/beacon/
https://w3c.github.io/resource-hints/
https://w3c.github.io/preload/
https://w3c.github.io/server-timing/
https://w3c.github.io/longtasks/
1.1 以navigation-timing为例
https://w3c.github.io/navigation-timing/timestamp-diagram.svg
avigationStart This attribute must return the time immediately after the user agent finishes prompting to unload the previous document. If there is no previous document, this attribute must return the time the current document is created.如果存在document，客户端取出document后立即返回时间；如果之前没有document，客户端在创建document之后再返回时间。
unloadEventStart If the previous document and the current document have the same origin, this attribute must return the time immediately before the user agent starts the unload event of the previous document. If there is no previous document or the previous document has a different origin than the current document, this attribute must return zero.如果之前的文件和当前的文件同源，这个属性在客户端开始下载时返回开始时间。如果不存在之前的文档或之前的文档不同源，该属性直接返回0
1.2 performance-timeline
<!doctype html>
<html>
<head></head>
<body onload="init()">
<img id="image0" src="https://www.w3.org/Icons/w3c_main.png" />
<script>
function init() {
// 使用mark方法设置对应的时间
performance.mark("startWork");
doWork(); // Some developer code
performance.mark("endWork");
measurePerf();
}
function measurePerf() {
performance //调用performance.getEntries()从里面获取到各个资源的访问情况
.getEntries()
.map(entry => JSON.stringify(entry, null, 2))
.forEach(json => console.log(json));
}
</script>
</body>
</html>
进入控制台，打开console
#调用performance.getEntries()可以获取各个资源的访问情况
window.performance.getEntries()
window.performance.toJSON();
#查看当前资源从什么时候建立连接的
window.performance.timing.connectStart
#查看当前资源什么时候dom加载完成
window.performance.timing.domComplete
#查看当前资源什么时候页面加载结束
window.performance.timing.loadEventEnd
#查看用时
window.performance.timing.loadEventEnd-window.performance.timing.connectStart
1.3 https://w3c.github.io/resource-timing/
<!doctype html>
<html>
<head>
</head>
<body onload="loadResources()">
<script>
function loadResources()
{
var start = new Date().getTime();
var image1 = new Image();
var resourceTiming = function() {
var now = new Date().getTime();
var latency = now - start;
alert("End to end resource fetch: " + latency);
};
image1.onload = resourceTiming;
image1.src = 'https://www.w3.org/Icons/w3c_main.png';
}
</script>
<img src="https://www.w3.org/Icons/w3c_home.png">
</body>
</html>
1.4 user-timing
通过自定义，可以查看响应api执行的时间
async function run() {
performance.mark("startTask1");
await doTask1(); // Some developer code
performance.mark("endTask1");
performance.mark("startTask2");
await doTask2(); // Some developer code
performance.mark("endTask2");
// Log them out
const entries = performance.getEntriesByType("mark");
for (const entry of entries) {
console.table(entry.toJSON());
}
}
run();
2.如何使用？
2.1 监控公司平台
公司的网站如果要做一个性能统计API，把js代码写入即可，把performance Timing的数据回传到服务器就可以了。如百度就是利用window.performance统计数据，并上传到服务器。
