进入网页后,怎么判断网页刷新了几次,或者路由切换了几次

在JavaScript中,可以使用 window.performance 对象来获取页面性能数据,其中包括页面加载次数和路由切换次数等信息。

具体可以使用 performance.navigation 和 performance.timing 两个属性来获取这些信息。

第一种

performance.navigation 属性提供了一些页面导航相关的信息,其中 type 字段表示导航类型,type 值为 0 表示页面第一次加载,为 1 表示页面通过页面内链接进行跳转,为 2 表示页面通过浏览器的前进或后退按钮进行前进或后退,为 255 表示其它方式。

performance.timing 属性提供了一些页面加载和渲染时间相关的信息,其中 navigationStart 字段表示导航开始时间,domComplete 字段表示页面 DOM 渲染完成时间。

以下是一个简单的例子:

if (performance.navigation.type === 1) {
  console.log("页面通过页面内链接进行跳转");
} else if (performance.navigation.type === 2) {
  console.log("页面通过浏览器的前进或后退按钮进行前进或后退");
} else if (performance.navigation.type === 255) {
  console.log("页面通过其它方式进行导航");
}

console.log("页面加载次数:" + performance.navigation.redirectCount + 1);
console.log("路由切换次数:" + performance.navigation.type - 1);

console.log("页面导航开始时间:" + performance.timing.navigationStart);
console.log("页面 DOM 渲染完成时间:" + performance.timing.domComplete);

第二种

可以使用 window.performance 对象来获取有关页面性能的信息,其中也包含了页面刷新和路由切换的次数。具体来说,你可以使用 performance.navigation 和 performance.getEntriesByType(‘navigation’) 这两个方法来获取刷新和路由切换的次数。

例如,以下代码可以在页面进入时输出刷新和路由切换次数:

window.onload = function() {
  console.log("刷新次数: " + performance.navigation.type);
  
  var navEntries = performance.getEntriesByType("navigation");
  if (navEntries.length > 0) {
    console.log("路由切换次数: " + navEntries[0].type);
  }
}

在上面的代码中,我们首先使用了 performance.navigation.type 来获取刷新次数,如果它的值为 1 表示当前页面是通过刷新进入的。然后,我们使用了 performance.getEntriesByType(‘navigation’) 来获取路由切换的次数,如果返回的数组长度大于0,则说明当前页面是通过路由切换进入的。

需要注意的是,这些方法并不是在所有浏览器中都被支持,因此需要注意兼容性问题。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值