咖啡机（K.F.J）_社区达人页_阿里云开发者社区

咖啡机（K.F.J）_社区达人页

简单粗暴的骨架屏实现

早在2013年Luke Wroblewski就提出了骨架屏（Skeleton Screen）的概念，他认为骨架屏是一个页面的空白版本，通过这个空白版本来传递一种信息，即页面正在渐进式的加载中。骨架屏的布局能与页面的视觉呈现保持一致，这样就能引导用户的关注点聚焦到感兴趣的位置。如下图所示，左边是数据渲染后的页面，右边是骨架屏，可以看到相应的位置都能对起来。　　在网上阅读了一些骨架屏原理的资料后，就自己想尝试一下，练练手，制作一个极简版本的骨架屏插件。因为简单，所以未来如要扩展，成本也会很低。上图是通过自己写的骨架屏插件得到的效果，对于公司简单结构的项目，还是游刃有余的。在编写插件时，参考了网上多篇资料分享的代码，站在巨人的肩膀上整合代码，省力了很多。插件的完整代码已上传至GitHub中，下面是其中的构造函数，以及三个常量，用到了ES6的一些概念，如对此不熟悉，可参考我之前整理的《ES6躬行记》。const NODE_ELEMENT = 1, //元素类型的节点常量 NODE_TEXT = 3, //文本类型的节点常量 NODE_COMMENT = 8; //注释类型的节点常量 /** * @param color 字体的背景色 * @param bgColor 带背景图模块的背景色 * @param rectHeight 指定区域的高度，默认为视口高度 * @param formFn 自定义表单着色规则 * @constructor */ function Skeleton({ color = "#DCDCDC", bgColor = "#F6F8FA", rectHeight = global.innerHeight, formFn = function() {} } = {}) { this.container = document.body; //骨架容器 this.color = color; this.bgColor = bgColor; this.rectHeight = rectHeight; this.formFn = formFn; }一、绘制骨架屏　　由于对Node.js不熟，所以采用纯原生的JavaScript来绘制骨架屏。首先将页面中的元素分成三类：图像、文本和表单。1）图像　　图像也就是元素，其src属性会被替换成一张灰色（色素是#EEE）的1*1的gif图。为了避免引入额外的请求，将该gif图转换成base64格式，写死在替换函数image()中，如下所示，呈现的效果如下图所示。image(element, isImage = true) { const { width, height } = getRect(element); //图像颜色 #EEE const src = "data:image/gif;base64,R0lGODlhAQABAPAAAPT09AA...."; if (isImage) element.src = src; else element.style.background = this.bgColor; element.width = width; element.height = height; }　　由于image()函数声明在原型（prototype）之上，因此省略了function关键字。isImage是一个布尔值，表示是否是一个元素。当传入非元素时，就需要将其背景替换成初始化时的纯色。getRect()是一个辅助函数，用于获取元素的尺寸和坐标。function getRect(element) { return element.getBoundingClientRect(); }2）文本　　处理文本是比较复杂的，因为文本长度是不定的，如下图所示，左边的文本是两行，骨架屏中也要变成两行，并且第二行不是满行的。　　网上的资料对于最后一行都会做遮罩处理，也就是用一个白底的块定位到相应位置，把多余的灰底遮掉。当文本只有一行时，还需要做特殊处理。　　而我在设计骨架屏插件的时候，采用了一个简单粗暴的方法，能够避免遮罩和单行的处理，那就是为所有文本节点添加元素。对于我这边不太复杂的HTML结构而言，能够大大简化代码的复杂度。具体方法如下所示，采用递归的方式逐个访问子节点，当节点是文本类型并且有内容时，就为其包裹标签。appendTextNode(parent) { //避免<span>中嵌套<span> if ( parent.childNodes.length <= 1 && parent.nodeName.toLowerCase() == "span" ) { return; } parent.childNodes.forEach(node => { if (node.nodeType === NODE_TEXT && node.nodeValue.trim().length > 0) { let span = document.createElement("span"); span.textContent = node.nodeValue; parent.replaceChild(span, node); } else { this.appendTextNode(node); } }); }　　下面的第一个元素在调用了appendTextNode()方法后，就变成了第二个元素。<p>本活动最终解释权归上海易点时空网络有限公司所有</p>  <p><span>本活动最终解释权归上海易点时空网络有限公司所有</span></p>　　为了让多行文本能呈现灰白相间的效果，就得借助CSS3的linear-gradient渐变属性来实现。如果对其不熟悉，可以参考之前的《CSS3中惊艳的gradient》一文。　　下面的计算方式照搬了饿了么的page-skeleton-webpack-plugin插件，其中getStyle()函数用于获取元素的CSS属性或属性对象（CSSStyleDeclaration）。calculate(element) { let { fontSize, lineHeight } = getStyle(element); lineHeight = parseFloat(lineHeight); //解析浮点数 fontSize = parseFloat(fontSize); const textHeightRatio = fontSize / lineHeight, //字体占行高的比值 firstColorPoint = ((1 - textHeightRatio) / 2 * 100).toFixed(2), //渐变的第一个位置，小数点后两位四舍五入 secondColorPoint = (((1 - textHeightRatio) / 2 + textHeightRatio) * 100).toFixed(2); //渐变的第二个位置 return ` background-image: linear-gradient( transparent ${firstColorPoint}%, ${this.color} 0, ${this.color} ${secondColorPoint}%, transparent 0); background-size: 100% ${lineHeight}; position: relative; color: transparent; `; } function getStyle(element, name) { const style = global.getComputedStyle(element); return name ? style[name] : style; } 　　首先读取字体大小和行高，然后计算字体占行高的比值（textHeightRatio），接着计算出渐变的两个位置（firstColorPoint和secondColorPoint），最后通过模板字面量输出文本的样式，字体颜色被设为了透明。　　绘制文本的逻辑都封装到了text()方法中，具体如下所示。text(element) { //判断是否是只包含文本的节点 const isText = element.childNodes && element.childNodes.length === 1 && element.childNodes[0].nodeType === NODE_TEXT && /\S/.test(element.childNodes[0].textContent); if (!isText) { return; } const rule = this.calculate(element); //计算样式 element.setAttribute("style", rule); }3）表单　　表单控件目前只处理了input、select和button，它们中的文本会变透明，添加背景色，placeholder属性变空，如下所示。form(element) { element.style.color = "transparent"; //内容透明 element.style.background = this.color; //重置背景 element.setAttribute("placeholder", ""); //清除提示 this.formFn && this.formFn.call(this, element); //执行自定义着色规则 }　　formFn是一个特殊的参数，在插件初始化时可传递进来，因为表单比较复杂，所以要自定义着色规则。例如一些页面的表单结构是下面这样的，那么就需要将也添加背景色。<ul> <li class="ui-flex"> <input type="text" /> li> <li class="ui-flex"> <input type="text" /> li> ul>　　自定义的着色规则如下所示，其中matches()是一个选择器匹配方法。new Skeleton({ formFn: function(element) { while(element && !this.matches(element, "li.ui-flex")) element = element.parentNode; element && (element.style.background = this.color); } }); matches(element, selector) { if (!selector || !element || element.nodeType !== NODE_ELEMENT) return false; const matchesSelector = element.webkitMatchesSelector || element.matchesSelector; return matchesSelector.call(element, selector);}4）移除　　因为骨架屏的特点是快速，所以在生成时需要移除多余的元素，例如指定区域外的元素、隐藏的元素和脚本元素，如下所示，其中isHideStyle()函数可判断是否是隐藏元素。removeElement(parent) { if (parent.children.length == 0) return; //有移除操作，所以未用Array.from()遍历 for (let i = 0; i < parent.children.length; i++) { const element = parent.children[i], { top } = getRect(element); if ( isHideStyle(element) || //隐藏元素 top >= this.rectHeight || //超出指定高度 element.nodeName.toLowerCase() == "script" //脚本元素 ) { element.remove(); i--; continue; } this.removeElement(element); } } function isHideStyle(element) { return ( getStyle(element, "display") == "none" || getStyle(element, "visibility") == "hidden" || getStyle(element, "opacity") == 0 || element.hidden ); }　　本来是想用Array.from()遍历元素，但删除后会影响迭代逻辑，因此改成了for循环语句。　　除了这三类元素之外，还得将注释节点也一并删除，如下所示。注意，childNodes与上面的children属性不同，它能够通过forEach()遍历。removeNode(parent) { if (parent.childNodes.length == 0) return; for (let i = 0; i < parent.childNodes.length; i++) { const node = parent.childNodes[i]; if (node.nodeType === NODE_COMMENT) { node.remove(); i--; continue; } this.removeNode(node); } }5）绘制　　绘制就是调用上面所提到的方法，包括移除元素、着色、替换图像等，具体如下所示。function draw() { this.container.style.background = "#FFF"; //容器背景重置 //移除元素和节点 this.removeElement(this.container); this.removeNode(this.container); //为文本添加 this.appendTextNode(this.container); //处理普通元素 Array.from( this.container.querySelectorAll( "div,section,footer,header,a,p,span,form,label,li" ) ).map(element => { //背景图或背景颜色的处理 const hasBg = getStyle(element, "background-image") != "none" || getStyle(element, "background-color") != "rgba(0, 0, 0, 0)"; if (hasBg) { this.image(element, false); } //文本处理 this.text(element); }); //处理表单中的控件 Array.from(this.container.querySelectorAll("input,select,button")).map( element => { this.form(element); } ); //元素处理 Array.from(this.container.querySelectorAll("img")).map(img => { this.image(img); }); }二、Puppeteer　　插件完成后，没有做到自动化，即需要在浏览器的控制台中手工执行骨架屏插件。翻阅资料后，大家都推荐使用Puppeteer。Puppeteer是一个Node库，它提供了一个高级API来通过DevTools协议控制Chromium或Chrome。也就是说，它是一个无头（headless）浏览器。　　一边翻资料，一边查看demo，尝试着写Node.js，后面跌跌撞撞的写出了可以执行的脚本。　　原理就是先打开无头浏览器；然后输入视口参数和页面地址，并添加插件地址；然后在打开的页面中执行插件，返回document.body中的HTML代码；最后将HTML写入到一个txt文件中。const puppeteer = require('puppeteer'), fs = require('fs'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); //视口参数 await page.setViewport({width: 375, height: 667}); // 事件监听，可用于调试 page.on('console', msg => console.log('PAGE LOG:', msg.text())); // waitUntil 参数有四个关键字：load、domcontentload、networkidle0和networkidle2 await page.goto('http://www.pwstrick.com/index.html', {waitUntil: 'networkidle2'}); await page.addScriptTag({url: 'http://www.pwstrick.com/js/skeleton.js'}); // 对打开的页面进行操作 const html = await page.evaluate(() => { let sk = new Skeleton(); sk.draw(); return document.body.innerHTML; }); //将骨架屏代码添加到content.txt文件中 fs.writeFileSync('content.txt', html); await browser.close(); })();　　本来是想在page.evaluate()中将插件以参数的形式传入，但一直不成功，后面就改成了page.addScriptTag()，引用插件的脚本。　　到目前为止，只能算是半自动化。要做到自动化，就得编写webpack插件，在打包的时候，将生成的HTML代码嵌入到页面中的指定位置，并且还要做到参数可配置化，以适合更多的场景。　　整个骨架屏插件只有200多行代码，去掉注释和空行只有160多行，本插件主要用于学习。

开源网站流量统计系统Piwik源码分析——参数统计（一）

一、整体概况　　Piwik的官网是matomo.org，使用PHP编写的，而我以前就是PHP工程师，因此看代码不会有障碍。目前最新版本是3.6，Github地址是matomo-org/matomo，打开地址将会看到下图中的内容（只截取了关键部分）。　　打开js文件夹，里面的piwik.js就是本次要分析的脚本代码（如下图红色框出部分），内容比较多，有7838行代码。　　先把系统的代码都下载下来，然后在本地配置虚拟目录，再开始安装。在安装的时候可以选择语言，该系统支持简体中文（注意下图中红色框出的部分）。系统会执行一些操作（注意看下图左边部分），包括检查当前环境能否安装、建立数据库等，按照提示一步一步来就行，比较简单，没啥难度。　　安装完后就会自动跳转到后台界面（如下图所示），有图表，有分析，和常用的统计系统差不多。功能还没细看，只做了初步的了解，界面的友好度还是蛮不错的。　　嵌到页面中的JavaScript代码与其它统计系统也类似，如下所示，也是用异步加载的方式，只是发送的请求地址没有伪装成图像地址（注意看标红的那句代码）。<script type="text/javascript"> var _paq = _paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//loc.piwik.cn/"; //自定义 _paq.push(['setTrackerUrl', u+'piwik.php']); _paq.push(['setSiteId', '1']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript'; g.async=true; g.defer=true; g.src='piwik.js'; s.parentNode.insertBefore(g,s); })(); </script>　　在页面中嵌入这段脚本后，页面在刷新的时候，会有下图中的请求。在请求中带了一大堆的参数，在后面的内容中会对每个参数做释义。二、脚本拆分　　7000多行的脚本，当然不能一行一行的读，需要先拆分，拆成一个一个的模块，然后再逐个分析。脚本之所以这么大，是因为里面编写了大量代码来兼容各个版本的浏览器，这其中甚至包括IE4、Firefox1.0、Netscape等骨灰级的浏览器。接下来我把源码拆分成6个部分，分别是json、private、query、content-overlay、tracker和piwik，如下图红线框出的所示，piwik-all中包含了全部代码，便于对比。代码已上传到Github。　　json.js是一个开源插件JSON3，为了兼容不支持JSON对象的浏览器而设计的，这里面的代码可以单独研究。private.js包含了一些用于全局的私有变量和私有函数，例如定义系统对象的别名、判断类型等。query.js中包含了很多操作HTML元素的方法，例如设置元素属性、查询某个CSS类的元素等，它类似于一个微型的jQuery库，不过有许多独特的功能。content-overlay.js有两部分组成，一部分包含内容追踪以及URL拼接等功能，另一部分是用来处理嵌套的页面，这里面具体没有细看。tracker.js中只有一个Tracker()函数，不过内容最多，有4700多行，主要的统计逻辑都在这里了。piwik.js中内容不多，包含一些初始化和插件的钩子等功能，钩子具体怎么运作的还没细看。　　虽然分成了6部分，但是各部分的内容还是蛮多的，并且内容之间是有联系的，因此短时间的话，很难搞清楚其中所有的门道。我就挑了一点我个人感觉最重要的先做分析。1）3种传送数据的方式　　我原先只知道两种传送数据的方式，一种是通过Ajax的方式，另一种是创建一个Image对象，然后为其定义src属性，数据作为URL的参数传递给后台，这种方式很通用，并且还能完美解决跨域问题。我以前编写的一个性能参数搜集的插件primus.js，也是这么传送数据的。在阅读源码的时候，发现了第三种传送数据的方式，使用Navigator对象的sendBeacon()。　　MDN上说：“此方法可用于通过HTTP将少量数据异步传输到Web服务器”。虽然这个方法有兼容问题，但我还是被震撼到了。它很适合统计的场景，MDN上又讲到：“统计代码会在页面关闭（window.onunload）之前向web服务器发送数据，但过早的发送数据可能错过收集数据的机会。然而， 要保证在页面关闭期间发送数据一直比较困难，因为浏览器通常会忽略在卸载事件中产生的异步请求。在使用sendBeacon()方法后，能使浏览器在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一页的载入。这就解决了提交分析数据时的所有的问题：使它可靠，异步并且不会影响下一页面的加载，并且代码更简单”。下面是代码片段（注意看标红的那句代码），存在于tracker.js中。function sendPostRequestViaSendBeacon(request) { var supportsSendBeacon = "object" === typeof navigatorAlias && "function" === typeof navigatorAlias.sendBeacon && "function" === typeof Blob; if (!supportsSendBeacon) { return false; } var headers = { type: "application/x-www-form-urlencoded; charset=UTF-8" }; var success = false; try { var blob = new Blob([request], headers); success = navigatorAlias.sendBeacon(configTrackerUrl, blob); // returns true if the user agent is able to successfully queue the data for transfer, // Otherwise it returns false and we need to try the regular way } catch (e) { return false; } return success; }2）参数释义　　下面的方法（存在于tracker.js中）专门用于搜集页面中的统计数据，将它们拼接成指定链接的参数，而这条链接中的参数最终将会发送给服务器。/** * Returns the URL to call piwik.php, * with the standard parameters (plugins, resolution, url, referrer, etc.). * Sends the pageview and browser settings with every request in case of race conditions. */ function getRequest(request, customData, pluginMethod, currentEcommerceOrderTs) { var i, now = new Date(), nowTs = Math.round(now.getTime() / 1000), referralTs, referralUrl, referralUrlMaxLength = 1024, currentReferrerHostName, originalReferrerHostName, customVariablesCopy = customVariables, cookieSessionName = getCookieName("ses"), cookieReferrerName = getCookieName("ref"), cookieCustomVariablesName = getCookieName("cvar"), cookieSessionValue = getCookie(cookieSessionName), attributionCookie = loadReferrerAttributionCookie(), currentUrl = configCustomUrl || locationHrefAlias, campaignNameDetected, campaignKeywordDetected; if (configCookiesDisabled) { deleteCookies(); } if (configDoNotTrack) { return ""; } var cookieVisitorIdValues = getValuesFromVisitorIdCookie(); if (!isDefined(currentEcommerceOrderTs)) { currentEcommerceOrderTs = ""; } // send charset if document charset is not utf-8. sometimes encoding // of urls will be the same as this and not utf-8, which will cause problems // do not send charset if it is utf8 since it's assumed by default in Piwik var charSet = documentAlias.characterSet || documentAlias.charset; if (!charSet || charSet.toLowerCase() === "utf-8") { charSet = null; } campaignNameDetected = attributionCookie[0]; campaignKeywordDetected = attributionCookie[1]; referralTs = attributionCookie[2]; referralUrl = attributionCookie[3]; if (!cookieSessionValue) { // cookie 'ses' was not found: we consider this the start of a 'session' // here we make sure that if 'ses' cookie is deleted few times within the visit // and so this code path is triggered many times for one visit, // we only increase visitCount once per Visit window (default 30min) var visitDuration = configSessionCookieTimeout / 1000; if ( !cookieVisitorIdValues.lastVisitTs || nowTs - cookieVisitorIdValues.lastVisitTs > visitDuration ) { cookieVisitorIdValues.visitCount++; cookieVisitorIdValues.lastVisitTs = cookieVisitorIdValues.currentVisitTs; } // Detect the campaign information from the current URL // Only if campaign wasn't previously set // Or if it was set but we must attribute to the most recent one // Note: we are working on the currentUrl before purify() since we can parse the campaign parameters in the hash tag if ( !configConversionAttributionFirstReferrer || !campaignNameDetected.length ) { for (i in configCampaignNameParameters) { if ( Object.prototype.hasOwnProperty.call(configCampaignNameParameters, i) ) { campaignNameDetected = getUrlParameter( currentUrl, configCampaignNameParameters[i] ); if (campaignNameDetected.length) { break; } } } for (i in configCampaignKeywordParameters) { if ( Object.prototype.hasOwnProperty.call( configCampaignKeywordParameters, i ) ) { campaignKeywordDetected = getUrlParameter( currentUrl, configCampaignKeywordParameters[i] ); if (campaignKeywordDetected.length) { break; } } } } // Store the referrer URL and time in the cookie; // referral URL depends on the first or last referrer attribution currentReferrerHostName = getHostName(configReferrerUrl); originalReferrerHostName = referralUrl.length ? getHostName(referralUrl) : ""; if ( currentReferrerHostName.length && // there is a referrer !isSiteHostName(currentReferrerHostName) && // domain is not the current domain (!configConversionAttributionFirstReferrer || // attribute to last known referrer !originalReferrerHostName.length || // previously empty isSiteHostName(originalReferrerHostName)) ) { // previously set but in current domain referralUrl = configReferrerUrl; } // Set the referral cookie if we have either a Referrer URL, or detected a Campaign (or both) if (referralUrl.length || campaignNameDetected.length) { referralTs = nowTs; attributionCookie = [ campaignNameDetected, campaignKeywordDetected, referralTs, purify(referralUrl.slice(0, referralUrlMaxLength)) ]; setCookie( cookieReferrerName, JSON_PIWIK.stringify(attributionCookie), configReferralCookieTimeout, configCookiePath, configCookieDomain ); } } // build out the rest of the request request += "&idsite=" + configTrackerSiteId + "&rec=1" + "&r=" + String(Math.random()).slice(2, 8) + // keep the string to a minimum "&h=" + now.getHours() + "&m=" + now.getMinutes() + "&s=" + now.getSeconds() + "&url=" + encodeWrapper(purify(currentUrl)) + (configReferrerUrl.length ? "&urlref=" + encodeWrapper(purify(configReferrerUrl)) : "") + (configUserId && configUserId.length ? "&uid=" + encodeWrapper(configUserId) : "") + "&_id=" + cookieVisitorIdValues.uuid + "&_idts=" + cookieVisitorIdValues.createTs + "&_idvc=" + cookieVisitorIdValues.visitCount + "&_idn=" + cookieVisitorIdValues.newVisitor + // currently unused (campaignNameDetected.length ? "&_rcn=" + encodeWrapper(campaignNameDetected) : "") + (campaignKeywordDetected.length ? "&_rck=" + encodeWrapper(campaignKeywordDetected) : "") + "&_refts=" + referralTs + "&_viewts=" + cookieVisitorIdValues.lastVisitTs + (String(cookieVisitorIdValues.lastEcommerceOrderTs).length ? "&_ects=" + cookieVisitorIdValues.lastEcommerceOrderTs : "") + (String(referralUrl).length ? "&_ref=" + encodeWrapper(purify(referralUrl.slice(0, referralUrlMaxLength))) : "") + (charSet ? "&cs=" + encodeWrapper(charSet) : "") + "&send_image=0"; // browser features for (i in browserFeatures) { if (Object.prototype.hasOwnProperty.call(browserFeatures, i)) { request += "&" + i + "=" + browserFeatures[i]; } } var customDimensionIdsAlreadyHandled = []; if (customData) { for (i in customData) { if ( Object.prototype.hasOwnProperty.call(customData, i) && /^dimension\d+$/.test(i) ) { var index = i.replace("dimension", ""); customDimensionIdsAlreadyHandled.push(parseInt(index, 10)); customDimensionIdsAlreadyHandled.push(String(index)); request += "&" + i + "=" + customData[i]; delete customData[i]; } } } if (customData && isObjectEmpty(customData)) { customData = null; // we deleted all keys from custom data } // custom dimensions for (i in customDimensions) { if (Object.prototype.hasOwnProperty.call(customDimensions, i)) { var isNotSetYet = -1 === indexOfArray(customDimensionIdsAlreadyHandled, i); if (isNotSetYet) { request += "&dimension" + i + "=" + customDimensions[i]; } } } // custom data if (customData) { request += "&data=" + encodeWrapper(JSON_PIWIK.stringify(customData)); } else if (configCustomData) { request += "&data=" + encodeWrapper(JSON_PIWIK.stringify(configCustomData)); } // Custom Variables, scope "page" function appendCustomVariablesToRequest(customVariables, parameterName) { var customVariablesStringified = JSON_PIWIK.stringify(customVariables); if (customVariablesStringified.length > 2) { return ( "&" + parameterName + "=" + encodeWrapper(customVariablesStringified) ); } return ""; } var sortedCustomVarPage = sortObjectByKeys(customVariablesPage); var sortedCustomVarEvent = sortObjectByKeys(customVariablesEvent); request += appendCustomVariablesToRequest(sortedCustomVarPage, "cvar"); request += appendCustomVariablesToRequest(sortedCustomVarEvent, "e_cvar"); // Custom Variables, scope "visit" if (customVariables) { request += appendCustomVariablesToRequest(customVariables, "_cvar"); // Don't save deleted custom variables in the cookie for (i in customVariablesCopy) { if (Object.prototype.hasOwnProperty.call(customVariablesCopy, i)) { if (customVariables[i][0] === "" || customVariables[i][1] === "") { delete customVariables[i]; } } } if (configStoreCustomVariablesInCookie) { setCookie( cookieCustomVariablesName, JSON_PIWIK.stringify(customVariables), configSessionCookieTimeout, configCookiePath, configCookieDomain ); } } // performance tracking if (configPerformanceTrackingEnabled) { if (configPerformanceGenerationTime) { request += "&gt_ms=" + configPerformanceGenerationTime; } else if ( performanceAlias && performanceAlias.timing && performanceAlias.timing.requestStart && performanceAlias.timing.responseEnd ) { request += "&gt_ms=" + (performanceAlias.timing.responseEnd - performanceAlias.timing.requestStart); } } if (configIdPageView) { request += "&pv_id=" + configIdPageView; } // update cookies cookieVisitorIdValues.lastEcommerceOrderTs = isDefined(currentEcommerceOrderTs) && String(currentEcommerceOrderTs).length ? currentEcommerceOrderTs : cookieVisitorIdValues.lastEcommerceOrderTs; setVisitorIdCookie(cookieVisitorIdValues); setSessionCookie(); // tracker plugin hook request += executePluginMethod(pluginMethod, { tracker: trackerInstance, request: request }); if (configAppendToTrackingUrl.length) { request += "&" + configAppendToTrackingUrl; } if (isFunction(configCustomRequestContentProcessing)) { request = configCustomRequestContentProcessing(request); } return request; }　　统计代码每次都会传送数据，而每次请求都会带上一大串的参数，这些参数都是简写，下面做个简单说明（如有不正确的地方，欢迎指正），部分参数还没作出合适的解释，例如UUID的生成规则等。首先将这些参数分为两部分，第一部分如下所列：1、idsite：网站ID2、rec：1（写死）3、r：随机码4、h：当前小时5、m：当前分钟6、s：当前秒数7、url：当前纯净地址，只留域名和协议8、_id：UUID9、_idts：访问的时间戳10、_idvc：访问数11、_idn：新访客（目前尚未使用）12、_refts：访问来源的时间戳13、_viewts：上一次访问的时间戳14、cs：当前页面的字符编码15、send_image：是否用图像请求方式传输数据16、gt_ms：内容加载消耗的时间（响应结束时间减去请求开始时间）17、pv_id：唯一性标识　　再列出第二部分，用于统计浏览器的功能，通过Navigator对象的属性（mimeTypes、javaEnabled等）和Screen对象的属性（width与height）获得。1、pdf：是否支持pdf文件类型2、qt：是否支持QuickTime Player播放器3、realp：是否支持RealPlayer播放器4、wma：是否支持MPlayer播放器5、dir：是否支持Macromedia Director6、fla：是否支持Adobe FlashPlayer7、java：是否激活了Java8、gears：是否安装了Google Gears9、ag：是否安装了Microsoft Silverlight10、cookie：是否启用了Cookie11、res：屏幕的宽和高（未正确计算高清显示器）　　上面这11个参数的获取代码，可以参考下面这个方法（同样存在于tracker.js中），注意看代码中的pluginMap变量（已标红），它保存了多个MIME类型，用来检测是否安装或启用了指定的插件或功能。/* * Browser features (plugins, resolution, cookies) */ function detectBrowserFeatures() { var i, mimeType, pluginMap = { // document types pdf: "application/pdf", // media players qt: "video/quicktime", realp: "audio/x-pn-realaudio-plugin", wma: "application/x-mplayer2", // interactive multimedia dir: "application/x-director", fla: "application/x-shockwave-flash", // RIA java: "application/x-java-vm", gears: "application/x-googlegears", ag: "application/x-silverlight" }; // detect browser features except IE < 11 (IE 11 user agent is no longer MSIE) if (!new RegExp("MSIE").test(navigatorAlias.userAgent)) { // general plugin detection if (navigatorAlias.mimeTypes && navigatorAlias.mimeTypes.length) { for (i in pluginMap) { if (Object.prototype.hasOwnProperty.call(pluginMap, i)) { mimeType = navigatorAlias.mimeTypes[pluginMap[i]]; browserFeatures[i] = mimeType && mimeType.enabledPlugin ? "1" : "0"; } } } // Safari and Opera // IE6/IE7 navigator.javaEnabled can't be aliased, so test directly // on Edge navigator.javaEnabled() always returns `true`, so ignore it if ( !new RegExp("Edge[ /](\\d+[\\.\\d]+)").test(navigatorAlias.userAgent) && typeof navigator.javaEnabled !== "unknown" && isDefined(navigatorAlias.javaEnabled) && navigatorAlias.javaEnabled() ) { browserFeatures.java = "1"; } // Firefox if (isFunction(windowAlias.GearsFactory)) { browserFeatures.gears = "1"; } // other browser features browserFeatures.cookie = hasCookies(); } var width = parseInt(screenAlias.width, 10); var height = parseInt(screenAlias.height, 10); browserFeatures.res = parseInt(width, 10) + "x" + parseInt(height, 10); }除了上述20多个参数之外，在系统官网上可点击“Tracking HTTP API”查看到所有的参数，只不过都是英文的。