什么是window.chrome

蚊子前端博客
发布于 2016-12-06 00:00
在别人的一段js代码里发现了window.chrome的使用,这里就简单的说一下

在以前我们需要检测当前浏览器是否是chrome时,通常我们是使用UA进行检测的:

COPYJAVASCRIPT

var isChrome = navigator.userAgent.toLowerCase().match(/chrome/) != null; console.log( isChrome );

不过现在又有新的方法可以检测是否是chrome浏览器了。在chrome浏览器里有一个全局变量window.chrome,我们也直接使用这个全局变量来进行判断:

COPYJAVASCRIPT

if( window.chrome ){ alert('此浏览器为chrome浏览器'); }

在window.chrome的全局变量里,有app, csi, loadTimes, runtime, webstore这些属性和方法,不过网上关于window.chrome这个变量的资料还是很少。window.chrome.app和window.chrome.webstore可能跟chrome扩展程序和网上应用商店有关系。

1. window.chrome.csi

window.chrome.csi是一个方法,执行 window.chrome.csi() 后会获得3个属性(不同版本的chrome里也会有tran属性):

COPYJAVASCRIPT

console.log( window.chrome.csi() );

COPYJSON

{ onloadT:1481031352403 pageT:70382.456 startE:1481031350604 tran:15 }
  • startE : 页面开始加载时的毫秒时间戳(1481010621721);

  • onloadT : 页面加载完后的毫秒时间戳(1481010626707);

  • pageT : 自页面开始加载到现在的毫秒时间(5695686.301);

  • tran : 目前不知该字段是什么含义

因此onloadT减去startE就能获取到页面的加载时间。

2. window.chrome.loadTimes

window.chrome.loadTimes也是一个方法,执行后更多关于页面加载的信息:

COPYJAVASCRIPT

console.log( window.chrome.loadTimes() );

COPYJSON

{ commitLoadTime:1481032100.719 connectionInfo:"http/1.1" finishDocumentLoadTime:1481032101.293 finishLoadTime:1481032101.439 firstPaintAfterLoadTime:0 firstPaintTime:1481032101.013 navigationType:"Reload" npnNegotiatedProtocol:"http/1.1" requestTime:1481032100.595 startLoadTime:1481032100.595 wasAlternateProtocolAvailable:false wasFetchedViaSpdy:false wasNpnNegotiated:true }

目前这里面我也有几个字段的含义不太明白,还望各位网友指点:

跟时间有关的属性(单位全部为秒):

  1. requestTime : 请求时间;

  2. startLoadTime : 开始加载时间;

  3. commitLoadTime

  4. firstPaintTime : 首次渲染时间

  5. firstPaintAfterLoadTime

  6. finishDocumentLoadTime : 文档首次加载完成时间

  7. finishLoadTime : 页面加载完成时间

其他属性:

  • connectionInfo : 连接协议(主要有: http/1.1,h2, quic/1+spdy/3等)

  • navigationType : 打开类型(Reload:刷新页面, Other:首次打开页面)

  • npnNegotiatedProtocol : 不明白含义,与connectionInfo保持一致

  • wasFetchedViaSpdy : 是否通过spdy协议传输

除了通过开发者工具查看加载时间外,也可以通过js直接打印各个时间。

3. 总结

在上面讲述的两个属性里,有两个属性表示的含义是相同的,不过只是时间单位不同而已:

COPYJAVASCRIPT

var csi = window.chrome.csi(), loadTimes = window.chrome.loadTimes(); csi.startE == loadTimes.startLoadTime*1000; csi.onloadT == loadTimes.finishDocumentLoadTime*1000;

在多次执行window.chrome.csi()window.chrome.loadTimes()后发现,除了pageT属性是表示当前页面打开的时间外,其他的属性都不会变的。因此只要这两个方法在页面加载完成后执行,不论什么时候执行,都是能获取到准确的数据的。

通过这个特性,我们就可以写一个方法来打印我们想要的时间:

COPYJAVASCRIPT

window.onload = function(){ if( window.chrome ){ var loadtime = window.chrome.loadTimes(); console.log('开始加载时间: '+loadtime.startLoadTime); console.log('文档加载完成时间: '+loadtime.finishDocumentLoadTime); console.log('页面加载完成时间: '+loadtime.finishLoadTime); // ... } }

欢迎各位提出意见或建议。

标签:
阅读(1620) 评论(3)

公众号:

qrcode

微信公众号:前端小茶馆