开发背景

• 短时间内完成网页性能统计上传，考虑到企业内实际环境，很多网页/系统需要运行在IE 5 兼容模式下，开发一个脚本，在不影响原网页的情况下，收集相应 用户电脑 打开网页的性能指标。

收集要素

• 进入页面时间，加载Js时间
• 页面所有元素加载完成时间
• 因为在原网页将该脚本放到最前面，故两者时间差为用户实际等待页面Ready时间（白屏），实际体验可能与渲染引擎相关（现代浏览器 大大快于IE，故该指标可作参考）
• IE 打开页面默认弹窗，会影响结束时间，会以用户点击弹窗作为结束
• 浏览器信息等可自行拓展

# 使用方法
- 引入代码文件，并给特定`id`, 相应标签属性可追加自定义值，用于辅助统计
- 涉及js 回调，所以需要提前赋值
# 技术特点
- 浏览器兼容（主要是IE 5、低侵入）
- 无三方库，考虑方便快速拓展

(function () {

Date.prototype.pattern = function (fmt) {
	var o = {
	"M+": this.getMonth() + 1, //月份 
	"d+": this.getDate(), //日 
	"h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时 
	"H+": this.getHours(), //小时 
	"m+": this.getMinutes(), //分 
	"s+": this.getSeconds(), //秒 
	"q+": Math.floor((this.getMonth() + 3) / 3), //季度 
	"S": this.getMilliseconds() //毫秒 
	};
	var week = {
	"0": "/u65e5",
	"1": "/u4e00",
	"2": "/u4e8c",
	"3": "/u4e09",
	"4": "/u56db",
	"5": "/u4e94",
	"6": "/u516d"
	};
	if (/(y+)/.test(fmt)) {
	fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	}
	if (/(E+)/.test(fmt)) {
	fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[this.getDay() + ""]);
	}
	for (var k in o) {
	if (new RegExp("(" + k + ")").test(fmt)) {
	fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	}
	}
	return fmt;
}
function getJsScriptDataScript() {
	var data = document.getElementById('statisticalScriptId').getAttribute('data');
	var key = 'code';
	if (data) {
	var result = data.match(new RegExp(key + "=[^\?\&]+", "g"));
	var value = result ? result[0].split('=')[1] : '';
	return value;
	}
	return '';
}
function getJsScriptRemark() {
	return document.getElementById('statisticalScriptId').src;
}
//兼容bind函数
if (!Function.prototype.bind) {
	Function.prototype.bind = function () {
	if (typeof this !== 'function') {
	throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
	}
	var _this = this;
	var obj = arguments[0];
	var ags = Array.prototype.slice.call(arguments, 1);
	return function () {
	_this.apply(obj, ags);
	};
	};
}
//兼容addEventListener函数
function addEventListener(ele, event, fn) {
	if (ele.addEventListener) {
	ele.addEventListener(event, fn, false);
	} else {
	ele.attachEvent('on' + event, fn.bind(ele));
	}
}
//兼容removeEventListener函数
function removeEventListener(ele, event, fn) {
	if (ele.removeEventListener) {
	ele.removeEventListener(event, fn, false);
	} else {
	ele.detachEvent('on' + event, fn.bind(ele));
	}
}
//闭包自治性
var ClientInfo = {
	InJsTime: '',
	InteractiveTime: '',
	DOMContentLoadedTime:'',
	LoadTime: '',
	ComputeName: '',
	UserName: '',
	IdentifyCode: getJsScriptDataScript(),
	Remark: getJsScriptRemark(),
	Href: '',
	Origin: '',
	Host: '',
	Port: '',
	PathName:''
};
ClientInfo.InJsTime = getNowDateTime();
try {
 var WshShell = new ActiveXObject("WScript.Shell");
 //document.write("计算机名 = " + WshShell.ExpandEnvironmentStrings("%COMPUTERNAME%") + "<br/>");
 //document.write("登录用户名 = " + WshShell.ExpandEnvironmentStrings("%USERNAME%") + "<br/>");
 ClientInfo.ComputeName = WshShell.ExpandEnvironmentStrings("%COMPUTERNAME%");
 ClientInfo.UserName = WshShell.ExpandEnvironmentStrings("%USERNAME%");
} catch (e) {
}
addEventListener(window, 'load', function () {
	//console.log('window load ' + (new Date()).pattern("yyyy-MM-dd hh:mm:ss S"));
	ClientInfo.LoadTime = getNowDateTime();
	sendData();
});
addEventListener(document, 'readystatechange', function () {
	var state = document.readyState;
	if (state == 'interactive') {
	ClientInfo.InteractiveTime = getNowDateTime();
	//console.log('document ' + document.readyState + (new Date()).pattern("yyyy-MM-dd hh:mm:ss S"));
	}
});
addEventListener(document, 'DOMContentLoaded', function () {
	ClientInfo.DOMContentLoadedTime = getNowDateTime();
	//console.log('document DOMContentLoaded' + (new Date()).pattern("yyyy-MM-dd hh:mm:ss S"));
});
function getNowDateTime() {
	var timeOffSet = (new Date()).getTimezoneOffset();
	return (new Date()).getTime() - timeOffSet * 60 * 1000; //(new Date()).pattern("yyyy-MM-dd hh:mm:ss S");
}
function sendData() {
	ClientInfo.Href = window.location.href;
	ClientInfo.Origin = window.location.origin;
	ClientInfo.Host = (window.location.host).toLowerCase().replace(/.chn.nexchip/, "");
	ClientInfo.Port = window.location.port;
	ClientInfo.PathName = window.location.pathname;
	var hostArray = 'xxxt01,xxxs01,xxxs02';
	var url = '';
	if (borGHostArray.indexOf(ClientInfo.Host) > -1) {
	url = window.location.protocol + "//" + window.location.host + "/bridgeapi/Api/BridgePageRecord/PostData"
	} else {
	url = 'http://xxxs01x/msgcenterapi/Api/SeriPageLoadRecord/PostData';
 }
	var paramObj = {
	httpUrl:url,
	type: 'post',
	data: ClientInfo	
	}
	/*请求调用*/
	httpRequest(paramObj, function (respondDada) {
	//这里编写成功的回调函数
	//console.log(respondDada)
	}, function () {
	//console.log('网络错误');
	});
}
function httpRequest(paramObj, fun, errFun) {
	var xmlhttp = null;
	/*创建XMLHttpRequest对象，
	 *老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：new ActiveXObject("Microsoft.XMLHTTP")
	 * */
	if (window.XMLHttpRequest) {
	xmlhttp = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	/*判断是否支持请求*/
	if (xmlhttp == null) {
	alert('你的浏览器不支持XMLHttp');
	return;
	}
	/*请求方式，并且转换为大写*/
	var httpType = (paramObj.type || 'GET').toUpperCase();
	/*数据类型*/
	var dataType = paramObj.dataType || 'json';
	/*请求接口*/
	var httpUrl = paramObj.httpUrl || '';
	/*是否异步请求*/
	var async = paramObj.async || true;
	/*请求参数--post请求参数格式为：foo=bar&lorem=ipsum*/
	var paramData = paramObj.data || [];
	var requestData = '';
	for (var name in paramData) {
	requestData += name + '=' + paramData[name] + '&';
	}
	requestData = requestData == '' ? '' : requestData.substring(0, requestData.length - 1);
	//console.log(requestData)
	/*请求接收*/
	xmlhttp.onreadystatechange = function () {
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
	/*成功回调函数*/
	fun(xmlhttp.responseText);
	} else {
	/*失败回调函数*/
	errFun;
	}
	}
	/*接口连接，先判断连接类型是post还是get*/
	if (httpType == 'GET') {
	xmlhttp.open("GET", httpUrl, async);
	xmlhttp.send(null);
	} else if (httpType == 'POST') {
	xmlhttp.open("POST", httpUrl, async);
	//发送合适的请求头信息
	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlhttp.send(requestData);
	}
}

	//setTimeout(function () { alert('表单打开超过20分钟，请先暂存或刷新，否则可能会丢失数据') }, 1000 * 60 * 20);
})();