HTML 5为window对象新增了performance属性,也就是新增了一个全局可用的performance对象——就像document、navigator等对象一样,通过该对象可以对浏览器进行相关分析。
分析时间性能
performance对象包含了一个timing属性,该属性是一个PerformanceTiming对象,该对象提供了如下属性。
➢ navigationStart:该属性返回浏览器成功卸载前一个文档的时间。如果不存在前一个文档,该属性的返回值与fetchStart属性返回的时间相同。
➢ unloadEventStart:该属性返回浏览器开始卸载前一个文档的时间。如果不存在前一个文档,该属性返回0。
➢ unloadEventEnd:该属性返回浏览器卸载前一个文档完成时的时间。如果不存在前一个文档,该属性返回0。
➢ redirectStart:该属性返回浏览器开始重定向的时间。
➢ redirectEnd:该属性返回浏览器重定向结束时的时间。
➢ fetchStart:该属性返回浏览器开始获取该资源的时间。
➢ domainLookupStart:该属性返回浏览器开始查找当前文档所在域名的时间。
➢ domainLookupEnd:该属性返回浏览器查找当前文档所在域名结束时的时间。
➢ connectStart:该属性返回浏览器与远程服务器开始建立连接时的时间。
➢ connectEnd:该属性返回浏览器与远程服务器建立连接完成时的时间。
➢ requestStart:该属性返回浏览器开始向远程服务器请求该文档时的时间。
➢ responseStart:该属性返回浏览器接收到远程服务器返回的当前文档第一个字节时的时间。
➢ responseEnd:该属性返回浏览器接收完远程服务器返回的当前文档所有字节时的时间。
➢ loadEventStart:该属性返回当前文档的onload事件监听器被触发时的时间。如果该事件监听器没有被触发过,则该属性返回0。
➢ loadEventEnd:该属性返回当前文档的onload事件监听器响应完成时的时间。如果该事件监听器没有被触发过,则该属性返回0。
通过上面列表不难看出,借助于performance的timing属性,可以获取浏览器的各种事件发生、完成时的时间。
分析导航行为
performance对象除了包括timing属性之外,还包括一个navigation属性,该属性是一个PerformanceNavigation对象,该对象包括如下两个属性。
➢ type:该属性返回进入该页面的方式。该属性可能返回如下属性值。
TYPENAVIGATE(数值0):代表正常进入到该页面。比如通过超链接、直接输入页面URL、提交表单等方式进入该页面。
TYPERELOAD(数值1):代表通过“重新加载”的方式进行该页面。比如用户单击了浏览器的“刷新”按钮,或者在JavaScript中调用location.reload();重新加载该页面。
TYPEBACKFORWARD(数值2):通过“前进”的方式进入该页面。比如用户通过单击浏览器的“前进”按钮进入该页面。
TYPE_RESERVED(数值255):如果不是上面几种情况,将会返回该属性值。
例子
<script type="text/javascript">
switch (performance.navigation.type)
{
case 0:
alert("正常导航到该页面!");
break;
case 1:
alert("用户重新加载该页面!");
break;
case 2:
alert("用户“前进”到该页面!");
break;
default :
alert("其他方法进入该页面!");
break;
}
</script>
注:本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ,详细内容请参阅书籍。