JS 判断页面是第一次加载还是刷新window.performance.navigation.type

JS高级程序设计第三版学习之路–25.5 web计时

页面性能一直都是 Web 开发人员最关注的领域。但直到最近，度量页面性能指标的唯一方式，就 是提高代码复杂程度和巧妙地使用 JavaScript 的 Date 对象。Web Timing API 改变了这个局面，让开发 人员通过 JavaScript 就能使用浏览器内部的度量结果，通过直接读取这些信息可以做任何想做的分析。 与本章介绍过的其他 API 不同，Web Timing API 实际上已经成为了 W3C 的建议标准，只不过目前支持 它的浏览器还不够多。

performance.navigation.type（该属性返回一个整数值，表示网页的加载来源，可能有以下4种情况）：

0：网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载，相当于常数performance.navigation.TYPE_NAVIGATE。
　　1：网页通过“重新加载”按钮或者location.reload()方法加载，相当于常数performance.navigation.TYPE_RELOAD。
　　2：网页通过“前进”或“后退”按钮加载，相当于常数performance.navigation.TYPE_BACK_FORWARD。
　　255：任何其他来源的加载，相当于常数performance.navigation.TYPE_RESERVED。
　performance.navigation.redirectCount：表示网页经过重定向的次数。

Web 计时机制的核心是 window.performance 对象。对页面的所有度量信息，包括那些规范中已 经定义的和将来才能确定的，都包含在这个对象里面。Web Timing 规范一开始就为 performance 对象 定义了两个属性。

其中，performance.navigation 属性也是一个对象，包含着与页面导航有关的多个属性，如下所示。

 redirectCount:页面加载前的重定向次数。
 type:数值常量，表示刚刚发生的导航类型。
 performance.navigation.TYPE_NAVIGATE (0):页面第一次加载。
 performance.navigation.TYPE_RELOAD (1):页面重载过。
 performance.navigation.TYPE_BACK_FORWARD (2):页面是通过“后退”或“前进”按钮打开的。
另外，performance.timing 属性也是一个对象，但这个对象的属性都是时间戳(从软件纪元开
始经过的毫秒数)，不同的事件会产生不同的时间值。这些属性如下所示。
 navigationStart:开始导航到当前页面的时间。
 unloadEventStart:前一个页面的 unload 事件开始的时间。但只有在前一个页面与当前页
面来自同一个域时这个属性才会有值;否则，值为 0。
 unloadEventEnd:前一个页面的 unload 事件结束的时间。但只有在前一个页面与当前页面
来自同一个域时这个属性才会有值;否则，值为 0。
 redirectStart:到当前页面的重定向开始的时间。但只有在重定向的页面来自同一个域时这
个属性才会有值;否则，值为 0。
 redirectEnd:到当前页面的重定向结束的时间。但只有在重定向的页面来自同一个域时这个
属性才会有值;否则，值为 0。
 fetchStart:开始通过 HTTP GET 取得页面的时间。
 domainLookupStart:开始查询当前页面 DNS 的时间。
 domainLookupEnd:查询当前页面 DNS 结束的时间。
 connectStart:浏览器尝试连接服务器的时间。
 connectEnd:浏览器成功连接到服务器的时间。
 secureConnectionStart:浏览器尝试以 SSL 方式连接服务器的时间。不使用 SSL 方式连接
时，这个属性的值为 0。
requestStart:浏览器开始请求页面的时间。
 responseStart:浏览器接收到页面第一字节的时间。
 responseEnd:浏览器接收到页面所有内容的时间。
 domLoading:document.readyState 变为"loading"的时间。
 domInteractive:document.readyState 变为"interactive"的时间。
 domContentLoadedEventStart:发生 DOMContentLoaded 事件的时间。 domContentLoadedEventEnd:DOMContentLoaded 事件已经发生且执行完所有事件处理程序的时间。
 domComplete:document.readyState 变为"complete"的时间。
 loadEventStart:发生 load 事件的时间。
 loadEventEnd:load 事件已经发生且执行完所有事件处理程序的时间。
通过这些时间值，就可以全面了解页面在被加载到浏览器的过程中都经历了哪些阶段，而哪些阶段 可能是影响性能的瓶颈。给大家推荐一个使用 Web Timing API 的绝好示例，地址是 http://webtimingdemo.appspot.com/。

支持Web Timing API 的浏览器有IE10+ 和Chrome

可以验证一下：mounted () { //第一种方法 // if(window.name == ""){ // console.log("首次被加载"); // window.name = "isReload"; // 在首次进入页面时我们可以给window.name设置一个固定值 // }else if(window.name == "isReload"){ // console.log("页面被刷新"); // } //第二种方法 if (window.performance.navigation.type == 1) { console.log("页面被刷新") }else{ console.log("首次被加载") } },