HTML5 | Performance

为了得到脚本运行的准确耗时，需要一个高精度时间戳。传统的做法是使用Date对象的getTime方法

var start = new Date().getTime();
// doSomething()
var now = new Date().getTime();
var latency = now - start;
console.log("任务运行时间：" + latency);

传统的缺点：

只能精确到毫秒级别（一秒的千分之一），想要得到更小的时间差别就无能为力
只能获取代码运行过程中的时间进度，无法知道一些后台事件的时间进度，比如浏览器用了多少时间从服务器加载网页

Performance的出现刚好解决了这个问题；

目前，所有主要浏览器都已经支持performance对象，包括Chrome 20+、Firefox 15+、IE 10+、Opera 15+。

Performance 是 HTML5的新特性之一，开发者们可以非常精确的统计到自己页面的表现情况，从而有针对性的进行优化，提升用户体验。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。
可以通过调用只读属性 Window.performance 来获得

什么是性能

Web性能是客观测量和加载时间和运行时的感知用户体验。Web性能是指网站加载，交互和响应以及用户交互过程中内容的平滑程度所需的时间。滚动顺畅吗？按钮是否可点击？弹出窗口是否可以快速打开，并且这些弹出窗口是否能够顺畅地生成动画？Web性能包括客观测量，如加载时间，每秒帧数和交互时间，以及主动体验内容加载所需的时间。

许多功能会影响性能，包括延迟，应用程序大小，DOM节点数量，发出的资源请求数量，JavaScript性能，CPU负载等。重要的是尽量减少加载和响应时间，并通过尽可能快地使体验尽可能地交互来添加额外的功能来隐藏延迟，同时在体验的较长尾部异步加载。

HTML5 | Performance

按触发顺序排列所有属性：(更详细标准的解释请参看：W3C Editor’s Draft)

navigationStart:在同一个浏览器上下文中，前一个网页（与当前页面不一定同域）unload 的时间戳，如果无前一个网页
unload ，则与 fetchStart 值相等
unloadEventStart:前一个网页（与当前页面同域）unload 的时间戳，如果无前一个网页 unload
或者前一个网页与当前页面不同域，则值为 0
unloadEventEnd:和 unloadEventStart 相对应，返回前一个网页 unload
事件绑定的回调函数执行完毕的时间戳
redirectStart:第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算，否则值为 0
redirectEnd:最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内的重定向才算，否则值为 0
fetchStart:浏览器准备好使用 HTTP 请求抓取文档的时间，这发生在检查本地缓存之前
domainLookupStart:DNS 域名查询开始的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与
fetchStart 值相等
domainLookupEnd:DNS 域名查询完成的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart
值相等
connectStart:HTTP（TCP）开始建立连接的时间，如果是持久连接，则与 fetchStart
值相等,如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接开始的时间
connectEnd:HTTP（TCP）完成建立连接的时间（完成握手），如果是持久连接，则与 fetchStart
值相等,如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接完成的时间

注意:这里握手结束，包括安全连接建立完成、SOCKS 授权通过

secureConnectionStart:HTTPS 连接开始的时间，如果不是安全连接，则值为 0
requestStart:HTTP
请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存,连接错误重连时，这里显示的也是新建立连接的时间
responseStart:HTTP 开始接收响应的时间（获取到第一个字节），包括从本地读取缓存
responseEnd:HTTP 响应全部接收完成的时间（获取到最后一个字节），包括从本地读取缓存
domLoading:开始解析渲染 DOM 树的时间，此时 Document.readyState 变为 loading，并将抛出
readystatechange 相关事件
domInteractive:完成解析 DOM 树的时间，Document.readyState 变为 interactive，并将抛出
readystatechange 相关事件

注意:只是 DOM 树解析完成，这时候并没有开始加载网页内的资源

domContentLoadedEventStart:DOM 解析完成后，网页内资源加载开始的时间,文档发生
DOMContentLoaded事件的时间
domContentLoadedEventEnd:DOM 解析完成后，网页内资源加载完成的时间（如 JS
脚本加载执行完毕），文档的DOMContentLoaded 事件的结束时间
domComplete:DOM 树解析完成，且资源也准备就绪的时间，Document.readyState 变为
complete，并将抛出 readystatechange 相关事件
loadEventStart:load 事件发送给文档，也即 load 回调函数开始执行的时间,如果没有绑定 load 事件，值为 0
loadEventEnd:load 事件的回调函数执行完毕的时间,如果没有绑定 load 事件，值为 0

比较常用到的

DNS解析：timing.domainLookupEnd - timing.domainLookupStart
建立连接：timing.connectEnd - timing.connectStart
发送请求：timing.responseStart - timing.requestStart
接收请求：timing.responseEnd - timing.responseStart
解析DOM树：timing.domInteractive - timing.domLoading
页面加载完成：timing.domContentLoadedEventStart - timing.domInteractive
DOMContentLoaded事件耗时： timing.domContentLoadedEventEnd -
timing.domContentLoadedEventStart
DOM加载完成：timing.domComplete - timing.domContentLoadedEventEnd
DOMLoad事件耗时：timing.loadEventEnd - timing.loadEventStart

performance.now

返回一个DOMHighResTimeStamp对象，获取从timing.navigationStart开始到调用该方法的时间，精确到千分之五毫秒（5微秒）

	var startTime, endTime;
    startTime = window.performance.now();
    console.log('看我运行的时间'); //doSomething()；
    endTime = window.performance.now();
    console.log(endTime - startTime);

HTML5 | Performance

资源性能数据

performance提供若干API允许我们对页面中加载的资源进行性能分析。

performance.getEntries
浏览器获取网页时，会对网页中每一个对象（脚本文件、样式表、图片文件等等）发出一个HTTP请求。而通过window.performance.getEntries方法，则可以以数组形式，返回这些请求的时间统计信息，每个数组成员均是一个PerformanceResourceTiming对象！

	(function () {
    // 是否支持
    if (!window.performance && !window.performance.getEntries) {
        return false;
    }

    var result = [];
    // 获取当前页面所有请求对应的PerformanceResourceTiming对象进行分析
    window.performance.getEntries().forEach(function (perf) {
        result.push({
            'url': perf.name,
            'entryType': perf.entryType,
            'type': perf.initiatorType,
            'duration(ms)': perf.duration
        });
    });

    // 控制台输出统计结果
    console.table(result);
})();

HTML5 | Performance

window.performance.getEntriesByName

var entries = window.performance.getEntriesByName(name, type);

window.performance.getEntriesByType

var entries = window.performance.getEntriesByType(type);

performance.setResourceTimingBufferSize
设置当前页面可缓存的最大资源数据个数，entryType为resource的资源数据个数。超出时，清空所有entryType为resource的资源数据。

window.performance.setResourceTimingBufferSize(maxSize);

自定义计时接口

performance.mark
mark方法用于为相应的视点做标记

window.performance.mark('mark_fully_loaded');

performance.clearMarks
clearMarks方法用于清除标记，如果不加参数，就表示清除所有标记

window.peformance.clearMarks('mark_fully_loaded');
window.performance.clearMarks();

performance.measure
计算两个mark之间的时长，创建一个DOMHighResTimeStamp保存在资源缓存数据中，可通过performance.getEntries()等相关接口获取。

window.performance.measure(name, startMark, endMark);

数学的限制，导致还有一些东西没有思考到。等我学好数学再论~

全文完！！！

参考资料：
https://www.infoq.cn/article/html5-performance-api-monitoring
https://www.w3.org/TR/performance-timeline/
https://developer.mozilla.org/zh-CN/docs/Web/API/Performance
https://www.cnblogs.com/bldxh/p/6857324.html
http://javascript.ruanyifeng.com/bom/performance.html#toc2