在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,则说明当前页面是通过路由切换进入的。
需要注意的是,这些方法并不是在所有浏览器中都被支持,因此需要注意兼容性问题。