Web教程：代码实例介绍

现代互联网应用大都由运行在服务器的后端程序和运行在各种终端设备的前端程序共同构成。后端的代码、资源和数据是预先就部署或存储在后端并且运行在后端服务器上。而前端运行所需的代码、资源和数据都是来自后端的。前端从后端服务器安装或加载程序并运行在终端设备中，并且前端和后端通过网络进相互协作，最终向用户展示和实现WEB应用的全部内容和功能。 代码实例 说完了理论的东西，我们来看点常见的核心代码实现。 收集用户信息 通过浏览器内置的Javascript对象，我们就可以收集当前用户的一些基本信息，我们将收集好的数据通过Image对象实例的src属性指向后端脚本并携带参数，就可以将我们收集的数据传给后端，之所以用Image对象而不是ajax，是为了避免跨域的问题。 (function(){ letparams={}; //document if(document){ params.domain=document.domain||'';//域名 params.url=document.URL||'';//当前URL地址 params.title=document.title||'';//当前页面标题 params.referrer=document.referrer||'';//上一个访问页面URL地址 } //window if(window&&window.screen){ params.sh=window.screen.height||0;//屏幕高度 params.sw=window.screen.width||0;//屏幕宽度 params.cd=window.screen.colorDepth||0;//屏幕颜色深度 } //navigator if(navigator){ params.lang=navigator.language||'';//语言 } //拼接参数 letargs=''; for(letiinparams){ if(args!==''){ args+='&'; } args+=`${i}=${params[i]}` } //通过伪装成Image对象，传递给后端 letimg=newImage(1,1); letsrc=`http://www.funlee.cn/api/test.jpg args=${encodeURIComponent(args)}`; img.src=src; })() 可以根据具体的实际需求，利用Javascript的内置API，还可以获取到更多的信息。 通过script标签引入埋点代码 获取web各阶段响应时间 为了准确获取我们的web应用程序的性能特性，我们就得知道该应用程序在各个阶段的响应时间，比如：DNS解析时间、TCP建立连接时间、首页白屏时间、DOM渲染完成时间、页面load时间等。好在这些信息都可以通过Performance接口获取相关信息来计算得出。 lettiming=performance.timing, start=timing.navigationStart, dnsTime=0, tcpTime=0, firstPaintTime=0, domRenderTime=0, loadTime=0; dnsTime=timing.domainLookupEnd-timing.domainLookupStart; tcpTime=timing.connectEnd-timing.connectStart; firstPaintTime=timing.responseStart-start; domRenderTime=timing.domContentLoadedEventEnd-start; loadTime=timing.loadEventEnd-start; console.log('DNS解析时间:',dnsTime, 'nTCP建立时间:',tcpTime, 'n首屏时间:',firstPaintTime, 'ndom渲染完成时间:',domRenderTime, 'n页面onload时间:',loadTime); CSS埋点 没错，CSS也能做埋点，这个算是一个小技巧，当然，CSS埋点只能处理一些简单的事件埋点，收集复杂的数据还是得用JS，但CSS埋点有个优点就是，无法被禁用。 完整实例请戳：CSS埋点 核心代码如下：