摘要:获取一组当前页面已经加载的资源对象。为时,表示资源的路径。超出时,清空所有为的资源数据。为的资源数量超出设置值的时候会触发该事件。自定义计时接口创建一个保存在资源缓存数据中,可通过等相关接口获取。返回一个包含对象所有属性的对象。
简介
performance是html5的新特性之一,通过它,页面的开发者们可以非常精确的统计到自己页面的表现情况,从而有针对性的进行优化,提升用户体验。
下面是小姐姐对performance相关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.domInteractive
DOMContentLoaded事件耗时:
timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart
DOM加载完成:timing.domComplete - timing.domContentLoadedEventEnd
DOMLoad事件耗时:timing.loadEventEnd - timing.loadEventStart
performance.now返回一个DOMHighResTimeStamp对象,获取从timing.navigationStart开始到调用该方法的时间,精确到千分之五毫秒(5微秒)。
下面是该方法的使用场景之一:通过计算代码块的起始位置以及结束位置performance.now()的差值,来获取一个比较精确的代码执行时间。
看代码:
var startTime, endTime; startTime = window.performance.now(); doSomething(); endTime = window.performance.now(); console.log(endTime - startTime);资源性能数据
performance提供若干API允许我们对页面中加载的资源进行性能分析。
performance.getEntries
获取一组当前页面已经加载的资源PerformanceEntry对象。接收一个可选的参数options进行过滤,options支持的属性有name,entryType,initiatorType。
var entries = window.performance.getEntries();
返回值如下图所示:
name,根据entryType不同,该值有不同含义。entryType为resource时,name表示资源的路径。
entryType,取值有:resource,mark,measure等,详情戳这里
initiatorType,初始化该资源的资源类型:
- 初始化资源是一个`Element`时,取值为节点的`localName`,通过`element.localName`获取。 - 初始化资源是一个`css`文件时,取值为`css`。 - 初始化资源是一个`XMLHttpRequest`时,取值为`xmlhttprequest`。 - 初始化资源是一个`PerformanceNavigationTiming`对象时,取值为空字符串。
startTime,一个DOMHighResTimeStamp对象,开始获取该资源的时间。
duration,一个DOMHighResTimeStamp对象,获取该资源消耗时长。
performance.getEntriesByName
根据参数name,type获取一组当前页面已经加载的资源数据。name的取值对应到资源数据中的name字段,type取值对应到资源数据中的entryType字段。
var entries = window.performance.getEntriesByName(name, type);
performance.getEntriesByType
根据参数type获取一组当前页面已经加载的资源数据。type取值对应到资源数据中的entryType字段。
var entries = window.performance.getEntriesByType(type);
performance.setResourceTimingBufferSize
设置当前页面可缓存的最大资源数据个数,entryType为resource的资源数据个数。超出时,清空所有entryType为resource的资源数据。
window.performance.setResourceTimingBufferSize(maxSize);
performance.onresourcetimingbufferfull
entryType为resource的资源数量超出设置值的时候会触发该事件。
performance.clearResourceTimings
移除缓存中所有entryType为resource的资源数据。
自定义计时接口performance.mark
创建一个DOMHighResTimeStamp保存在资源缓存数据中,可通过performance.getEntries()等相关接口获取。
entryType为字符串mark
name为创建时设置的值
startTime为调用mark时的时间
duration为0,因为mark没有时长
window.performance.mark(name)
performance.clearMarks
移除缓存中所有entryType为mark的资源数据。
performance.measure
计算两个mark之间的时长,创建一个DOMHighResTimeStamp保存在资源缓存数据中,可通过performance.getEntries()等相关接口获取。
entryType为字符串measure
name为创建时设置的值
startTime为调用measure时的时间
duration为两个mark之间的时长
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返回一个包含performance对象所有属性的JSON对象。
THE END以上就是全部内容啦,有意见或者建议欢迎积极留言哦,笔芯~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/89445.html
摘要:下面我们从前端基础和底层原理开始讲起。对于和这三个对应于矢量图位图和图的渲染来说,给前端开发带来了重武器,很多小游戏也因此蓬勃发展。这篇文章受众之大,后来被人重新整理并发布为,其中还包括中文版。 showImg(https://segmentfault.com/img/bVbjM5r?w=1142&h=640); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 这...
摘要:定义标准的文本。然后看看函数的定义自启动来按下按钮的时差不能超过最大持续时间重新绘制菜单项的位置先用确定按下按钮的时间,储存在中。如果到了规定时间的话,就执行。然后再把取下的第一个当成第十三个接在最后面,又成了新的菜单排列。 showImg(https://segmentfault.com/img/bVbw1zV?w=818&h=479); 效果: 弧形菜单,文字按规则变形以及变换透...
阅读 1618·2021-09-26 09:55
阅读 1357·2021-09-23 11:22
阅读 2684·2021-09-06 15:02
阅读 2601·2021-09-01 11:43
阅读 3907·2021-08-27 13:10
阅读 3655·2021-08-12 13:24
阅读 2055·2019-08-30 12:56
阅读 2976·2019-08-30 11:22