window.performance 的用法,由于当时要判定当前页面的操作是否为刷新,从而了解到了前端性能统计的数据的这个API

306 阅读2分钟

使用window.performance API是W3C性能小组引入的新的API,目前IE9以上的浏览器都支持。一个performance对象的完整结构如下图所示:

此图与此文均来自cnblogs(感谢) 此图片来自https://www.cnblogs.com/sunshq/p/5312231.html

navigation字段统计的是一些网页导航相关的数据

window.performance.navigation

  • type : 由于我当时查找怎样获得页面是否刷新的方法,从而得知应从 type 里面可以反馈到,有:0,1,2 三个返回值。 【0】代表: 用户通过常规导航方式访问页面,比如点一个链接,或者一般的get方式
    【1】代表:用户通过刷新(包括JS调用刷新接口等方式访问页面) 当时需求就是要得知用户在页面是否有刷新的动作
    【2】代表:用户通过后退按钮访问本页面

  • redirectCount : 重定向的数量(只读),但是这个接口有同源策略限制,即仅能检测同源的重定向 ( 暂时没时间去理解,原谅本人能力有限,估计是跨域 )

window.performance.memory 代表JavaScript对内存的占用 (本人一直没机会用到)

  • jsHeapSizeLimit:
  • totalJSHeapSize:
  • usedJSHeapSize:

最重要的是timing字段的统计数据,它包含了网络、解析等一系列的时间数据。 (感觉很有用,大家有时间可以去研究下)

window.performance.getEntries() 它可以获取页面中每个静态资源的请求的信息

此图与此文均来自cnblogs(感谢) 此图片来自https://www.cnblogs.com/sunshq/p/5312231.html

链接里面有更详细的解析说明用法,由于笔者实力有限(我只是个打杂的),可以去链接看看,等以后哪天真用上了,我再好好把这window.performance API 里的信息补全

结语

前端react QQ群:788023830 ---- React/Redux - 地下老英雄

前端交流 QQ群:249620372 ---- FRONT-END-JS前端

(我们的宗旨是,为了加班,为了秃顶……,仰望大佬),希望小伙伴们加群一起学习