开发者学堂课程【大数据分析之企业级网站流量运营分析系统开发实战（第一阶段）：网站流量日志埋点收集—原理实现雏形—如何解决 js 跨域问题（伪装图片）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/693/detail/12171
网站流量日志埋点收集—原理实现雏形—如何解决 js 跨域问题（伪装图片）
内容简介
一、雏形图分析得出存在问题
二、小结
一、雏形图分析得出存在问题
我们学习要想埋点收集，我们需要考虑哪些性能点。
如图：看图得知这里面其实隐藏着一个弊端，就是我们当下埋点收集数据的时候，我们是把采集到数据直接发送到这台机器的后端，发往本机的叫做 localhost，那么，这时候这里就会产生一个性能上的问题，就是我们 localhost 这台机器，它要身兼两份职责，第一份职责是需要去响应我们外界各种浏览器对页面的请求响应。第二就是它要去响应我们这种 JS 发送了一个采集数据的响应，那么这就产生一个问题，我们这台服务器身兼多职，既要响应用户的页面有响应，又要去响应我们的 js 收集数据的这种响应，那这时候会势必造成这台服务器的压力过大，那么怎么解决呢？
这就是我们隐藏的另外一个问题：一台服务器，既对外提供我们的页面 web 服务，又需要去接受我们页面 JS 收集数据的请求响应。即服务器身兼多职，性能压力大。
解决方法：可以像京东一样，单独部署一台服务器，专门用于数据的接收。所以针对这个问题理论上好解决，我们为了降低服务器压力，我们单独部署一台服务器，专门用于接收我们请求数据的处理。
比如我们上新一台服务器 collectitcast.cn，我们再发送的数据就不往本级发送，而是发往另一台服务器上，这样就会降低我们服务器的压力。
但部署新的服务器会产生新的问题：
$ajax(“localhost://collect?num=1”)
换为：http://collect.itcast.cn/collect?num=1
因为一台机器上的js不能往另一台的服务器上发送，所以这里隐藏了一个前端非常棘手的问题：跨域问题。
跨域就是指我们的主机，协议，端口，其中任何一个不同，它就是不同的域。浏览器为了安全，有一个同源策略，就是默认情况下，会禁止一台服务器上的 js 发送至另一台服务器上，避免数据不安全。
跨域的本质是为了限制 js 的请求不安全，是针对 js 的限制。跨域问题是本身存在的，那我们如何解决这个问题？在前端开发中有很多方案可以解决，那么在我们的页面数据采集领域，通常采用请求图片的形式直接绕开跨域问题的方式。
什么叫做请求图片：
如果在页面上写上一个<img>标签，就代表在我们的页面上多了一个图片，多了什么样的图片就取决于 src 属性。Src 属性和 js 属性一样，既可以指向本地路径下如 img 路径下叫做1.jpg，这样就可以把图片请求过来，也可以指向网络上任何一台机器的路径。这时候，我们就以请求图片的方式就可以解决问题，比如在图片路径写上http://collect.itcast.cn即<img src=“http://collect.itcast.cn”>
也就是把我们的链接指向我们的服务器 collectitcast.cn，后面依然给它请求我们的具体资源，比如为了方便，我们请求资源 log.gift，后面再拼接参数如num=1，若有其他需求可以继续如 item=11111。
最终为：
<imgsrc=“http://collect.itcast.cn/log.gft?num=1&item=1111”>
需要什么数据就把数据放在请求参数的后面
所以一旦以这种方式
“http://collect.itcast.cn/log.gft?num=1&item=1111”请求，我们的图片请求就没有跨域问题。我们表面是在请求图片，但实际是在请求图片的同时把我们收集到的数据以参数形式拼接在图片后面。这样就完成了域的限制问题，因为图片的请求没有域的限制，js 请求有域的限制。
所以这就是我们在网站数据收集领域常见的技术：以伪装成请求图片的形式，把采集收集到的数据以参数的形式拼接在请求图片url的后面从而把收集的数据传到指定的服务器上去。
最后还需考虑一个问题：既然是请求图片，有来有回是http协议的本质，人家请求图片我们就要响应图片，我们响应图片的名字必须和它请求的一致，但是要注意我们如果每次响应的图片都在页面上显示，是不是用户的页面就会变得乱七八糟，那如何降低请求图片对页面的影响？所以最后一个问题是：为了降低请求的图片对页面的视觉干扰，我们该如何做？
方法是：把图片的像素设置的非常小，设置成1*1像素
这也从客观层面解释了为什么我们在浏览京东时，我们它的很多请求都是在请求图片，原因就在此：请求gift都是在传递我们采集的数据
二、小结
从一个技术的理论层面，要想落实在企业中能够线上运行，我们除了追求能跑通之外还要追求性能，能不能利于维护，能不能利于扩展的问题。
小结：
埋点 js 代码实现自定义收集用户数据
1.js 和 html 页面耦合在一起不利于后续js维护
方法：把 js 单独提取处理变成一个文件然后通过 src 属性引入页面进行所谓解耦合
2.一台服务器身兼多职压力过大降低服务器请求压力
方法：单独的去部署服务器专门用于采集数据的请求响应，可能会产生跨域问题(限制 js 跨域的数据发送)
以请求图片的形式把采集的数据拼接成为图片的参数发送到指定的服务器上去绕开 js 的跨域问题。
