什么是window.chrome

2020-05-22 本文已影响0人 zhao_ran

在别人的一段js代码里发现了window.chrome的使用，这里就简单的说一下

在以前我们需要检测当前浏览器是否是chrome时，通常我们是使用 $\color{red}{UA}$ 进行检测的：

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

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

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

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

1. window.chrome.csi

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

console.log( window.chrome.csi() );
{
    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也是一个方法，执行后更多关于页面加载的信息：

console.log( window.chrome.loadTimes() );
{
    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
}

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

跟时间有关的属性（单位全部为秒）：

requestTime ：请求时间；

startLoadTime : 开始加载时间；

commitLoadTime

firstPaintTime ：首次渲染时间

firstPaintAfterLoadTime

finishDocumentLoadTime ：文档首次加载完成时间

finishLoadTime ：页面加载完成时间

其他属性：

connectionInfo ：连接协议（主要有： http/1.1，h2, quic/1+spdy/3等）
navigationType ：打开类型（Reload:刷新页面， Other:首次打开页面）
npnNegotiatedProtocol ：不明白含义，与connectionInfo保持一致
wasFetchedViaSpdy ：是否通过spdy协议传输
除了通过开发者工具查看加载时间外，也可以通过js直接打印各个时间。

3. 总结

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

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属性是表示当前页面打开的时间外，其他的属性都不会变的。因此只要这两个方法在页面加载完成后执行，不论什么时候执行，都是能获取到准确的数据的。

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

window.onload = function(){
    if( window.chrome ){
        var loadtime = window.chrome.loadTimes();

        console.log('开始加载时间： '+loadtime.startLoadTime);
        console.log('文档加载完成时间： '+loadtime.finishDocumentLoadTime);
        console.log('页面加载完成时间： '+loadtime.finishLoadTime);
        // ...
    }
}

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

什么是window.chrome

1. window.chrome.csi

2. window.chrome.loadTimes

3. 总结

猜你喜欢

热点阅读