window.performance 网页性能计算

▲ 是什么？

performance 是浏览器提供的一个js对象，里面存储了各种性能指标。

查看浏览器是否支持 performance --->>>https://caniuse.com/#search=performance

几乎都是支持performance属性的

▲ 怎么用？

先看下 github上一个比较好的使用例子，https://github.com/addyosmani/timing.js/blob/master/timing.js

再看下官方 API：https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

各指标详细解释：https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming

来看下这张好图，

https://www.w3.org/TR/navigation-timing/#sec-window.performance-attribute

里面详解了详细的时间过程

▲ 几个经常使用的参数

vart=performance.timing;vartimes={};//【重要】页面加载完成的时间//【原因】这几乎代表了用户等待页面可用的时间times.loadPage=t.loadEventEnd-t.navigationStart;//【重要】解析

DOM 树结构的时间//【原因】反省下你的 DOM

树嵌套是不是太多了！times.domReady=t.domComplete-t.responseEnd;//【重要】重定向的时间//【原因】拒绝重定向！比如，http://example.com/

就不该写成

http://example.comtimes.redirect=t.redirectEnd-t.redirectStart;//【重要】DNS

查询时间//【原因】DNS 预加载做了么？页面内是不是使用了太多不同的域名导致域名查询的时间太长？// 可使用 HTML5 Prefetch

预查询 DNS ，见：[HTML5 prefetch](http://segmentfault.com/a/1190000000633364)

times.lookupDomain=t.domainLookupEnd-t.domainLookupStart;//【重要】读取页面第一个字节的时间//【原因】这可以理解为用户拿到你的资源占用的时间，加异地机房了么，加CDN

处理了么？加带宽了么？加 CPU 运算速度了么？// TTFB 即 Time To First Byte 的意思//

维基百科：https://en.wikipedia.org/wiki/Time_To_First_Bytetimes.ttfb=t.responseStart-t.navigationStart;//【重要】内容加载完成的时间//【原因】页面内容经过

gzip 压缩了么，静态资源 css/js

等压缩了么？times.request=t.responseEnd-t.requestStart;//【重要】执行 onload

回调函数的时间//【原因】是否太多不必要的操作都放到 onload

回调函数里执行了，考虑过延迟加载、按需加载的策略么？times.loadEvent=t.loadEventEnd-t.loadEventStart;//

DNS 缓存时间times.appcache=t.domainLookupStart-t.fetchStart;//

卸载页面的时间times.unloadEvent=t.unloadEventEnd-t.unloadEventStart;// TCP

建立连接完成握手的时间times.connect=t.connectEnd-t.connectStart;

▲ 另个好用的更精准的计时函数

performance.mark(name)

performance.now()

vart0=performance.now();doSomething();vart1=performance.now();console.log("Call to doSomething took "+(t1-t0)+" milliseconds.");

performance.mark("Begin");do_work(50000);performance.mark("End");console.log(performance.getEntriesByName("Begin","mark"));