性能是HTML5的新特性之一。通过它，页面开发者可以准确统计自己页面的性能，从而有针对性地进行优化，提升用户体验。以下是小姐姐学习性能相关API的总结。一起上车吧~performance.timing返回一个PerformanceTiming对象，用于获取完整的页面加载信息。是时候呈现这张图了：我们比较关注的时间段及其耗时计算方法如下：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.domInteractiveDOMContentLoaded事件耗时：timing.domdomMContentEntLoadedEvent．一毫秒（5微秒）。下面是该方法的一种使用场景：通过计算代码块的起始位置和结束位置performance.now()之间的差值来获得更准确的代码执行时间。看代码：varstartTime,endTime;startTime=window.performance.now();做一点事（）;endTime=window.performance.now();console.log(endTime-startTime);resourceperformancedataperformance提供了几个API让我们Profile页面加载的资源。performance.getEntries获取当前页面已经加载的一组资源PerformanceEntry对象。接收用于过滤的可选参数选项。选项支持的属性有name、entryType、initiatorType。varentries=window.performance.getEntries();返回值如下图所示：name，根据entryType的不同有不同的含义。当entryType为resource时，name表示资源的路径。entryType，取值有：resource，mark，measure等，详情点这里initiatorType，初始化资源的资源类型：-当初始化资源为`Element`时，取值为节点，通过`element.localName`获取。-当初始资源为`css`文件时，值为`css`。-当初始化资源是`XMLHttpRequest`时，值为`xmlhttprequest`。-当初始化资源为PerformanceNavigationTiming对象时，值为空字符串。startTime，一个DOMHighResTimeStamp对象，开始获取资源的时间。duration，DOMHighResTimeStamp对象，获取资源消耗时长。performance.getEntriesByName根据参数name和type获取当前页面已经加载的一组资源数据。name的值对应资源数据中的name字段，type的值对应资源数据中的entryType字段。varentries=window.performance.getEntriesByName（名称，类型）；performance.getEntriesByType根据参数类型获取当前页面已经加载的一组资源数据。type值对应于资源数据中的entryType字段。varentries=window.performance.getEntriesByType(类型);performance.setResourceTimingBufferSize设置当前页面最多可以缓存的资源数据条数，entryType为resource的资源数据条数。超过时，清除所有entryType为resource的资源数据。window.performance.setResourceTimingBufferSize(maxSize);performance.onresourcetimingbufferfullentryType当Type为resource的资源数量超过设定值时会触发该事件。performance.clearResourceTimings移除缓存中entryType为resource的所有资源数据。自定义计时接口performance.mark创建一个DOMHighResTimeStamp，保存在资源缓存数据中，可以通过performance.getEntries()等相关接口获取。entryType是一个字符串mark name是创建时设置的值startTime是mark被调用的时间duration为0，因为mark没有持续时间window.performance.mark(name)performance.clearMarks移除所有entry在entryType为标记资源数据的缓存中。performance.measure计算两个标记之间的时间，创建一个DOMHighResTimeStamp保存在资源缓存数据中，可以通过performance.getEntries()等相关接口获取。entryType是一个字符串measure name是创建时设置的值startTime是调用measure的时间duration是两个标记之间的时长window.performance.measure(name,startMark,endMark);performance.clearMeasures移除缓存中entryType为measure的所有资源数据。performance.navigation返回PerformanceNavigation类型的只读对象：type，进入页面的方式：-`TYPE_NAVIGATENEXT(0)`，通过点击链接，书签，在浏览器地址栏输入地址，或者跳转通过脚本-`TYPE_RELOAD(1)`，点击页面中的刷新按钮，或通过`Location.reload()`方法-`TYPE_BACK_FORWARD(2)`，点击页面中的前进和后退按钮-`TYPE_RESERVED(255)`，其他方式redirectCount，表示在到达这个页面之前经过了多少次重定向。performance.toJSON返回一个包含性能对象所有属性的JSON对象。以上就是THEEND的全部内容。如果您有任何意见或建议，请留下积极的信息。笔芯~
