利用chrome.loadTimes判断站点是否使用了HTTP/2 进入全屏
line

前言

在前一篇文章的末尾,有提到HTTP/2站点的验证方法:

  • 通过chrome扩展HTTP/2 and SPDY indicator的方式
  • 通过curl --http2 -I的方式

其实还有一种更简单的方法,因为支持「Http2」的chrome版本,完全可通过其提供的chrome.loadTimesApi来进行判断。

下面直接看看本站通过这个Api得到的结果:

baidufe-chrome-loadtimes.png

其中需要关注的就是wasFetchedViaSpdynpnNegotiatedProtocolconnectionInfo这几个属性,具体就不解释了。

API封装

把这几个指标封装成一个简单的方法:

(function(){
    // 保证这个方法只在支持loadTimes的chrome浏览器下执行
    if(window.chrome && typeof chrome.loadTimes === 'function') {
        var loadTimes = window.chrome.loadTimes();
        var spdy = loadTimes.wasFetchedViaSpdy;
        var info = loadTimes.npnNegotiatedProtocol || loadTimes.connectionInfo;
        // 就以 「h2」作为判断标识
        if(spdy && /^h2/i.test(info)) {
            return console.info('本站点使用了HTTP/2');
        }
    }
    console.warn('本站点没有使用HTTP/2');
})();

测试

1、拿 https://www.baidu.com 做测试

baidu-result.png

2、拿 https://www.baidufe.com 做测试

baidufe-result.png


祝大家HTTP/2玩儿起来!

阿里巴巴-钉钉-开放平台,能力开放&开发者运营岗位招聘中, 期待你的加入!
钉钉开放,让应用开发更简单
充分开放,是钉钉的重要方向!除致力于为开发者打造丰富的开放API, 更易接入的场景化能力包, 完备的应用开发工具之外, 还需要持续构建开放能力的布道、开发者生态运营体系,包括培训、沙龙、大会、社区合作等等。业务在快速发展,我们也还需要更多优秀的小伙伴加入!

评论区域

line