旧系统网页性能收集，兼容IE5，低侵入收集网页脚本

鹤少

开发背景

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

收集要素

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

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

复制代码

(function () {

1. Date.prototype.pattern = function (fmt) {
2.         var o = {
3.                 "M+": this.getMonth() + 1, //月份         
4.                 "d+": this.getDate(), //日         
5.                 "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时         
6.                 "H+": this.getHours(), //小时         
7.                 "m+": this.getMinutes(), //分         
8.                 "s+": this.getSeconds(), //秒         
9.                 "q+": Math.floor((this.getMonth() + 3) / 3), //季度         
10.                 "S": this.getMilliseconds() //毫秒         
11.         };
12.         var week = {
13.                 "0": "/u65e5",
14.                 "1": "/u4e00",
15.                 "2": "/u4e8c",
16.                 "3": "/u4e09",
17.                 "4": "/u56db",
18.                 "5": "/u4e94",
19.                 "6": "/u516d"
20.         };
21.         if (/(y+)/.test(fmt)) {
22.                 fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
23.         }
24.         if (/(E+)/.test(fmt)) {
25.                 fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[this.getDay() + ""]);
26.         }
27.         for (var k in o) {
28.                 if (new RegExp("(" + k + ")").test(fmt)) {
29.                         fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
30.                 }
31.         }
32.         return fmt;
33. }
35. function getJsScriptDataScript() {
36.         var data = document.getElementById('statisticalScriptId').getAttribute('data');
37.         var key = 'code';
38.         if (data) {
39.                 var result = data.match(new RegExp(key + "=[^\?\&]+", "g"));
40.                 var value = result ? result[0].split('=')[1] : '';
41.                 return value;
42.         }
44.         return '';
45. }
47. function getJsScriptRemark() {
48.         return document.getElementById('statisticalScriptId').src;
49. }
51. //兼容bind函数
52. if (!Function.prototype.bind) {
53.         Function.prototype.bind = function () {
54.                 if (typeof this !== 'function') {
55.                         throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
56.                 }
57.                 var _this = this;
58.                 var obj = arguments[0];
59.                 var ags = Array.prototype.slice.call(arguments, 1);
60.                 return function () {
61.                         _this.apply(obj, ags);
62.                 };
63.         };
64. }
66. //兼容addEventListener函数
67. function addEventListener(ele, event, fn) {
68.         if (ele.addEventListener) {
69.                 ele.addEventListener(event, fn, false);
70.         } else {
71.                 ele.attachEvent('on' + event, fn.bind(ele));
72.         }
73. }
75. //兼容removeEventListener函数
76. function removeEventListener(ele, event, fn) {
77.         if (ele.removeEventListener) {
78.                 ele.removeEventListener(event, fn, false);
79.         } else {
80.                 ele.detachEvent('on' + event, fn.bind(ele));
81.         }
82. }
84. //闭包自治性
85. var ClientInfo = {
86.         InJsTime: '',
87.         InteractiveTime: '',
88.         DOMContentLoadedTime:'',
89.         LoadTime: '',
90.         ComputeName: '',
91.         UserName: '',
92.         IdentifyCode: getJsScriptDataScript(),
93.         Remark: getJsScriptRemark(),
95.         Href: '',
96.         Origin: '',
97.         Host: '',
98.         Port: '',
99.         PathName:''
100. };
101. ClientInfo.InJsTime = getNowDateTime();
103. try {
104.     var WshShell = new ActiveXObject("WScript.Shell");
105.     //document.write("计算机名 = " + WshShell.ExpandEnvironmentStrings("%COMPUTERNAME%") + "<br/>");
106.     //document.write("登录用户名 = " + WshShell.ExpandEnvironmentStrings("%USERNAME%") + "<br/>");
107.     ClientInfo.ComputeName = WshShell.ExpandEnvironmentStrings("%COMPUTERNAME%");
108.     ClientInfo.UserName = WshShell.ExpandEnvironmentStrings("%USERNAME%");
110. } catch (e) {
112. }
114. addEventListener(window, 'load', function () {
115.         //console.log('window load ' + (new Date()).pattern("yyyy-MM-dd hh:mm:ss S"));
116.         ClientInfo.LoadTime = getNowDateTime();
117.         sendData();
118. });
120. addEventListener(document, 'readystatechange', function () {
121.         var state = document.readyState;
122.         if (state == 'interactive') {
123.                 ClientInfo.InteractiveTime = getNowDateTime();
124.                 //console.log('document ' + document.readyState + (new Date()).pattern("yyyy-MM-dd hh:mm:ss S"));
125.         }
126. });
128. addEventListener(document, 'DOMContentLoaded', function () {
129.         ClientInfo.DOMContentLoadedTime = getNowDateTime();
130.         //console.log('document DOMContentLoaded' + (new Date()).pattern("yyyy-MM-dd hh:mm:ss S"));
131. });
133. function getNowDateTime() {
134.         var timeOffSet = (new Date()).getTimezoneOffset();
136.         return (new Date()).getTime() - timeOffSet * 60 * 1000; //(new Date()).pattern("yyyy-MM-dd hh:mm:ss S");
137. }
139. function sendData() {
140.         ClientInfo.Href = window.location.href;
141.         ClientInfo.Origin = window.location.origin;
142.         ClientInfo.Host = (window.location.host).toLowerCase().replace(/.chn.nexchip/, "");
143.         ClientInfo.Port = window.location.port;
144.         ClientInfo.PathName = window.location.pathname;
146.         var hostArray = 'xxxt01,xxxs01,xxxs02';
147.         var url = '';
148.         if (borGHostArray.indexOf(ClientInfo.Host) > -1) {
149.                 url = window.location.protocol + "//" + window.location.host + "/bridgeapi/Api/BridgePageRecord/PostData"
150.         } else {
151.                 url = 'http://xxxs01x/msgcenterapi/Api/SeriPageLoadRecord/PostData';
152.     }
154.         var paramObj = {
155.                 httpUrl:url,
156.                 type: 'post',
157.                 data: ClientInfo                       
158.         }
160.         /*请求调用*/
161.         httpRequest(paramObj, function (respondDada) {
162.                 //这里编写成功的回调函数
163.                 //console.log(respondDada)
164.         }, function () {
165.                 //console.log('网络错误');
166.         });
167. }
169. function httpRequest(paramObj, fun, errFun) {
170.         var xmlhttp = null;
171.         /*创建XMLHttpRequest对象，
172.          *老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：new ActiveXObject("Microsoft.XMLHTTP")
173.          * */
174.         if (window.XMLHttpRequest) {
175.                 xmlhttp = new XMLHttpRequest();
176.         } else if (window.ActiveXObject) {
177.                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
178.         }
179.         /*判断是否支持请求*/
180.         if (xmlhttp == null) {
181.                 alert('你的浏览器不支持XMLHttp');
182.                 return;
183.         }
184.         /*请求方式，并且转换为大写*/
185.         var httpType = (paramObj.type || 'GET').toUpperCase();
186.         /*数据类型*/
187.         var dataType = paramObj.dataType || 'json';
188.         /*请求接口*/
189.         var httpUrl = paramObj.httpUrl || '';
190.         /*是否异步请求*/
191.         var async = paramObj.async || true;
192.         /*请求参数--post请求参数格式为：foo=bar&lorem=ipsum*/
193.         var paramData = paramObj.data || [];
194.         var requestData = '';
195.         for (var name in paramData) {
196.                 requestData += name + '=' + paramData[name] + '&';
197.         }
198.         requestData = requestData == '' ? '' : requestData.substring(0, requestData.length - 1);
199.         //console.log(requestData)
201.         /*请求接收*/
202.         xmlhttp.onreadystatechange = function () {
203.                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
204.                         /*成功回调函数*/
205.                         fun(xmlhttp.responseText);
206.                 } else {
207.                         /*失败回调函数*/
208.                         errFun;
209.                 }
210.         }
212.         /*接口连接，先判断连接类型是post还是get*/
213.         if (httpType == 'GET') {
214.                 xmlhttp.open("GET", httpUrl, async);
215.                 xmlhttp.send(null);
216.         } else if (httpType == 'POST') {
217.                 xmlhttp.open("POST", httpUrl, async);
218.                 //发送合适的请求头信息
219.                 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
220.                 xmlhttp.send(requestData);
221.         }
222. }

复制代码

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

复制代码

来源:https://www.cnblogs.com/hijushen/p/17677231.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！