Performance什么是PerformanceAPI允许获取与当前页面性能相关的信息，用于准确衡量、控制和提升浏览器的性能。该API提供了以前无法实现的网站性能测量精度。比如我们想知道Vue初始化的具体耗时，可以使用Date对象的getTime方法来实现：letstart=newDate().getTime();//暴露真实的自己//初始化核心代码vm._self=vminitLifecycle(vm)//$parent/$children等initEvents(vm)//事件监听initRender(vm)//slot,_c...callHook(vm,'beforeCreate')initInjections(vm)//resolveinjectionsbeforedata/propsinitState(vm)//初始化数据、prop、方法并执行响应initProvide(vm)//resolveprovideafterdata/propscallHook(vm,'created')//这里你可以访问组件状态letnow=newDate().getTime();letlatency=now-start;console.log("Initializationtime:"+latency);上面的做法有两个缺点：getTime方法（以及Date对象的其他方法）都只能精确到毫秒级别（千分之一秒），要想得到更小的时间差你无能为力；这种写法只能获取代码运行过程中的时间进度，无法获知一些后台事件的时间进度，比如浏览器从服务器加载网页用了多长时间。为了解决这两个不足，ES5引入了“高精度时间戳”API，部署在性能对象上。它的精度可以达到千分之一毫秒（百万分之一秒），这对于衡量程序的细微差别，提高程序的运行速度，还可以获取后台事件的时间进度是非常好的。PerformanceAPI提供了许多方便的接口来测试我们程序的性能。除了一些古老的版本，它兼容当前的主流浏览器，所以很多优秀的框架也使用这个API进行测试。Performance属性我们来看看在Chrome浏览器控制台执行window.performance会出现什么：在Safari下执行是如下结果。各属性含义简单说明memorymemory是一个非标准属性，不是所有的浏览器都会有，它表示Performance有多少内存。memory:{usedJSHeapSize:16100000,//JS对象（包括V8引擎内部对象）占用的内存必须小于totalJSHeapSizetotalJSHeapSize:35100000,//可用内存jsHeapSizeLimit:793000000//内存大小限制}timeOrigintimeOrigin是一个非-standard属性，不是所有的浏览器都会有，它是一系列时间点的参考点，精确到千分之十毫秒。timeOrigin:1589851526166.005navigationnavigation介绍如何导航到当前文档，说明我从哪里来？本题navigation:{redirectCount:0,//如果有重定向，页面会跳转几次重定向type:0//0是TYPE\_NAVIGATENEXT正常进入的页面（非刷新、非重定向等）//1表示TYPE\_RELOADwindow.location.reload()刷新的页面//2表示TYPE\_BACK\_FORWARD通过浏览器的前进后退按钮进入的页面（历史记录）//255表示TYPE\_UNDEFINED不是那个上面通过}onresourcetimingbufferfullonresourcetimingbufferfull方式进入的页面是一个事件处理器，当resourcetimingbufferfull事件被触发时会被调用。它的值是一个手动设置的回调函数，会在浏览器的资源时间性能缓冲区满时执行。functionbuffer_full(event){console.log("WARNING:ResourceTimingBufferisFULL!");performance.setResourceTimingBufferSize(200);}functioninit(){//设置资源缓冲区满时的回调performance.onresourcetimingbufferfull=buffer_full;上面是MDN官方给出的例子，意思是当缓冲区满了，执行buffer_full函数。Timing是一系列关键时间点，包括网络、分析等一系列时间数据。先看一下关键时间点的时序图：然后梳理一下各个属性的含义：timing:{//在同一个浏览器上下文中，上一个网页（不一定和当前页面同域）卸载时间戳，如果没有上一个网页卸载，则等于fetchStart值navigationStart:1441112691935,//上一个网页（与当前页面同域）卸载的时间戳，如果没有上一个网页卸载或上一个网页与当前页面域不同，值为0。unloadEventStart:0,//对应unloadEventStart，返回上一个网页unload事件绑定的回调函数执行时的时间戳。unloadEventEnd:0,//第一次HTTP重定向发生的时间。只有存在重定向并且是同域名内的重定向，否则值为0redirectStart:0,//最后一次HTTP重定向完成的时间。仅当有跳转且为同一域名内的重定向时，否则值为0redirectEnd:0,//浏览器准备使用HTTP请求获取文档的时间，发生在检查本地缓存之前fetchStart:1441112692155,//DNS域名查询开始时间，如果使用本地缓存（即没有DNS查询）或者长连接，等于fetchStart值domainLookupStart:1441112692155,//DNS域名查询完成时间，如果是本地使用cache（即没有DNS查询）或者长连接，等于fetchStartdomainLookupEnd的值：1441112692155,//HTTP（TCP）开始建立连接的时间，如果是长连接，就是等于fetchStart的值//注意如果传输层出错，重新建立连接，那么这里是新建立的连接开始的时间connectStart:1441112692155,//HTTP(TCP)的时间完成建立连接的ent（握手完成），如果是持久连接，则等于fetchStart的值//注意，如果是在传输层，如果发生错误，重新建立连接，时间当新建立的连接完成时//注意这里握手结束，包括建立安全连接和通过connectEnd进行SOCKS授权：1441112692155,//HTTPS连接开始的时间，如果不是安全连接，该值is0secureConnectionStart:0,//HTTP请求开始读取真实文档（完成连接建立）的时间，包括从本地缓存中读取//连接错误重连时，这里也显示新建立的连接时间requestStart:1441112692158,//HTTP开始接收响应的时间（获取第一个字节），包括从本地读取缓存responseStart:1441112692686,//接收响应的时间n接收到所有HTTP响应（获取到最后一个字节），包括从本地缓存中读取responseEnd:1441112692687,//开始解析渲染DOM树的时间。此时Document.readyState变为loading，会抛出一个readystatechange相关事件domLoading:1441112692690,//当DOM树解析完成后，Document.readyState变为交互状态，会抛出readystatechange相关事件//注意此时只有DOM树解析完成，网页中的资源并没有加载domInteractive:1441112693093,//DOM解析完成后，网页中的资源加载开始时间//发生在DOMContentLoaded事件抛出之前。domContentLoadedEventStart:1441112693093,//DOM解析完成后，网页中资源加载完成时间（如JS脚本加载执行完成）domContentLoadedEventEnd:1441112693101,//当DOM树解析完成，资源就绪时，Document.readyState变为complete，会抛出一个readystatechange相关事件domComplete:1441112693214,//load事件发送到document，即load回调函数开始执行Time//注意如果没有load事件bound,valueis0loadEventStart:1441112693214,//load事件的回调函数执行的时间loadEventEnd:1441112693215}Performance方法在刚才打印的Performance对象原型上挂载了很多方法：下面我们来梳理一下每个方法是什么does:getEntries()当浏览器获取到一个网页时，它会向网页中的每个对象（脚本文件、样式表、图像文件等）发送一个HTTP请求。以数组的形式返回这些请求的时间统计信息。有多少请求，返回的数组就有多少成员。与performance.timing相比，增加了name、entryType、initiatorType、duration属性。varentry={//资源名称，也是资源名称的绝对路径:"http://cdn.alloyteam.com/wp-content/themes/alloyteam/style.css",//资源类型entryType:"resource",//谁发起请求initiatorType:"link",//link是标签//script是
