- A+
所属分类：Web前端
开发背景
- 短时间内完成网页性能统计上传，考虑到企业内实际环境，很多网页/系统需要运行在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); })();
