14.11　　HTML5新增的浏览器分析

　　　　HTML5为Window对象新增了performance属性，也就是新增了一个全局可用的performance对象-就像document、navigator

　　　　等对象一样，通过该对象可以对浏览器进行相关分析。

14.11.1　　分析时间性能

　　　　performance对象包含了一个timing属性，该属性是一个PerformanceTiming对象，该对象提供了如下属性。

　　　　　　navigationStart：该属性返回浏览器成功卸载前一个文档的时间。如果不存在前一个文档，该属性的返回值与fetchStart属性

　　　　　　　　　　　　　　返回的时间相同

　　　　　　unloadEventStart：该属性返回浏览器开始卸载前一个文档的时间。如果不存在前一个文档，该属性返回0。

　　　　　　unloadEventEnd：该属性返回浏览器卸载前一个文档的时间。如果不存在前一个文档，该属性返回0。

　　　　　　redirectStart：该属性返回浏览器开始重定向的时间。

　　　　　　redirectEnd：该属性返回浏览器重定向结束时的时间。

　　　　　　fatchStart：该属性返回浏览器开始获取该资源的时间。

　　　　　　domainLookupStart：该属性返回浏览器开始查找当前文档所在域名的时间。

　　　　　　domainLookupEnd：该属性返回浏览器查找当前文档所在域名结束时的时间。

　　　　　　connectStart：该属性返回浏览器与远程服务器开始建立连接时的时间。

　　　　　　connectEnd：该属性返回浏览器与远程服务器建立连接完成时的时间。

　　　　　　requestStart：该属性返回浏览器开始向远程服务器请求该文档时的时间。

　　　　　　responseStart：该属性返回浏览器接收到远程服务器返回的当前文档第一个字节时的时间。

　　　　　　responseEnd：该属性返回浏览器接收完远程服务器返回的当前文档所有字节时的时间。

　　　　　　loadEventStart：该属性返回当前文档的onload事件监听器被处罚时的时间。如果该事件监听器没有被触发过，则该属性返回0。

　　　　　　loadEventEnd：该属性返回当前文档的onload事件监听器响应完成时的时间。如果该事件监听器没有被触发过，则该属性返回0。

14.11.2　　分析导航行为

　　　　performance对象除了包括timing属性之外，还包括一个navigation属性，该属性是一个PerformanceNavigation对象。

　　　　该对象包括如下两个属性。

　　　　　　type：该属性返回进入该页面的方式。该属性可能返回如下属性值。

　　　　　　　　TYPE_NAVIGATE（数值0）：代表正常进入到该页面。比如通过超链接、直接输入页面URL、提交表单等方式进入该页面。

　　　　　　　　TYPE_RELOAD（数值1）：代表通过“重新加载”的方式进入该页面。比如用户单击了浏览器的“刷新”按钮，或者在JavaScript中

　　　　　　　　　　　　　　　　　　　　　调用location.reload();重新加载该页面。

　　　　　　　　TYPE_BACK_FORWARD(数值2)：通过“前进”的方式进入该页面。比如用户通过单击浏览器的“前进”按钮进入该页面。

　　　　　　　　TYPE_RESERVED（数值255）：如果不是上面几种情况，将会返回该属性值。

　　　　　　redirectCount：该属性返回重定向的次数。

　　　　type属性代码示范：

　　　　　　switch(performance.navigation.type)

　　　　　　{

　　　　　　　　case 0:

　　　　　　　　　　　　alert("正常导航到该页面！");

　　　　　　　　　　　　break;

　　　　　　　　case 1:

　　　　　　　　　　　　alert("用户重新加载该页面！");

　　　　　　　　　　　　break;

　　　　　　　　case 2:

　　　　　　　　　　　　alert("用户前进到该页面！");

　　　　　　　　　　　　break;

　　　　　　　　default:

　　　　　　　　　　　　alert("其他方法进入该页面！");

　　　　　　　　　　　　break;

　　　　　　}

15.1.1　　绑定HTML元素属性

　　　　JavaScript脚本通常通过绑定元素属性来触发脚本函数。

　　　　代码示范：

　　　　　　//脚本代码

　　　　　　<script>

　　　　　　　　function test()

　　　　　　　　{

　　　　　　　　　　alert("绑定元素测试");

　　　　　　　　}

　　　　　　</script>

　　　　　　//html代码

　　　　　　<button onclick="test()">测试</button>

　　　　点击测试按钮时将会弹出对话框“绑定元素测试”。