js获取浏览器类型、版本以及网络速度

这几天在做前端性能方面的研究，顺带着也学了如何获取浏览器类型，版本，还有网速。

浏览器类型及版本

主要是使用navigator.userAgent获取信息来判断，注意的一点是IE11中没有MSIE这个符号，可以使用“rv:11.0”来判断。

function getBrowserInfo() {
	var agent = navigator.userAgent.toLowerCase();
	var regStr_ie = /msie [\d.]+;/gi;
	var regStr_ff = /firefox\/[\d.]+/gi
	var regStr_chrome = /chrome\/[\d.]+/gi;
	var regStr_saf = /safari\/[\d.]+/gi;

           //判断是否IE<11浏览器  
	var isIE = agent.indexOf("compatible") > -1 && agent.indexOf("msie" > -1); 
            //判断是否IE的Edge浏览器 
	var isEdge = agent.indexOf("edge") > -1 && !isIE;  
            //判断是否是IE11
	var isIE11 = agent.indexOf('trident') > -1 && agent.indexOf("rv:11.0") > -1;

	if (isIE) {
		var reIE = new RegExp("msie (\\d+\\.\\d+);");
		reIE.test(agent);
		var fIEVersion = parseFloat(RegExp["$1"]);
		if (fIEVersion == 7) {
			return "IE/7";
		} else if (fIEVersion == 8) {
			return "IE/8";
		} else if (fIEVersion == 9) {
			return "IE/9";
		} else if (fIEVersion == 10) {
			return "IE/10";
		}
	} //isIE end 
	if (isIE11) {
		return "IE/11";
	}
	//firefox
	if (agent.indexOf("firefox") > 0) {
		return agent.match(regStr_ff);
	}
		//Safari
	if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
		return agent.match(regStr_saf);
	}
		//Chrome
	if (agent.indexOf("chrome") > 0) {
		return agent.match(regStr_chrome);
	}
}

调用函数

//获取浏览器信息
var browser = getBrowserInfo();
//根据正则将所有数字、‘.’‘/’全部去掉，剩下浏览器名
var b_name = (browser + "").replace(/[0-9./]/ig, ""); 
//根据正则将所有非数字全部去掉，剩下版本  
var b_version = parseInt((browser + "").replace(/[^0-9.]/ig, "")); 
console.log("正在使用" + b_name + "浏览器，" + "版本是" + b_version);

测试结果：

网速

js获取网速一般是使用加载已知大小的图片，统计加载用的时间，计算出的结果大概接近网速，大家想用的话可以上网查一下，我这里使用的是navigator.connection.downlink属性，这个属性目前只在chrome浏览器支持，这也是局限的一点。

这里的downlink 的值代表着带宽，单位是Mbps(兆/秒)，注意哦，这里的b是小b，转换成KB是大B，1B = 8b ;

所以转换成KB/s的公式为：navigator.connection.downlink * 1024 / 8

//测网速，仅谷歌可用
function measureBW() {
	var speed = navigator.connection.downlink * 1024 / 8; //单位为KB/sec
	console.log("网速为" + speed + "KB/s");
}

目前也是边查边学，有不足的地方，欢迎大家指出。