css一样追踪你,清空缓存也没有用

一直以来,网站要追踪用户的操作和信息,都需要用到Js,但今天偶然看到有人用css来做网站用户的交互监测,而且完全可以实现针对不同用户的不同操作。

先说结论,其实实现的思路很简单,我们都知道css中有一些属性可以响应用户的交互,例如,link、hover之类的,当鼠标hover到某个dom上的时候,可以设置background的url是某个php之类的链接。然后你hover一次,就触发一次background的url中的php链接,这样就实现了使用css进行用户追踪与监测。就类似于这样,

<style type="text/css">

.xxxclass{

width:11px;height:11px;

/*...更多*/

}

.xxxclass:hover{

background:url('xxx.php?xx=a&ee=b');

/*之类的链接*/

}

</style>

这其实是用css来写逻辑了,等于是把css当做js来用。这种作法必须是有它特定的应用场景才行,如果只是为了使用css监测用户而这样写css,有点没有必要。

因为除非你单独写监测用户的css,否则你把样式和测试用户的css写在一起,且不说这违背了mvc的原则,单是以后的维护就是一个大问题。当然了,如果有兴趣,可以封装一个css的用户监测组件。

<!-- 下面一些示例 -->

<!-- 监测用户的字体情况, -->

例如你的网站使用了某个xx字体,但用户的电脑上没有,那就可以使用@font-face,它有一个src属性,可以把src设置为某个字体的链接。当用户下载一次,就计数一次。

<style type="text/css">

@font-face{

font-family: :xxxfont;

src:url('xxfont.php?fontxx=xx1');

}

#div_id{

font-family: xxxfont;

}

</style>

<!-- 监测鼠标悬停时间 -->

这个思路很好,就是定义一个css3的动画,然后10s一个url、20s一个url、n秒一个url,看下面的代码,

<style type="text/css">

@keyframes xxmouse{

0%{

background: url('aaa.php?xx=0');

}

30%{

background: url('aaa.php?xx=30');

}

50%{

background: url('aaa.php?xx=40');

}

90%{

background: url('aaa.php?xx=90');

}

}

</style>

这样,你可以根据用户在某个dom上停留的时间来做一些事情。

<!-- 监测特定关键词 -->

我们知道,html5的pattern属性,可以用来验证输入字段的模式,也就是说,你可以使用正则。然后再加上css3的 :valid选择器,可以根据条件来指定样式的变化。就像这样式的,

<input type="text" id="xxxid" pattern="^test$" />

<style type="text/css">

#xxxid{

background: url('xxx.php?xxx=testxxx');

}

</style>

<!-- -->

我看网上还有一些例子,但也都大同小异,基本上都是通过各种CSS样式中的src属性,来向后台发请求。说到根儿上,还是“事件驱动”。

但这样做有啥意义么?我个人主观感觉没啥必要性,因为css和js,都一样会对网页造成阻塞。只不过是阻塞的阶段有些区别而已。

浏览器在下载JS的时候,会阻止图片、css之类的文件下载;而CSS会阻塞dom树的渲染,因为你必须有css之后,对dom的渲染才有意义。

喔,明白了,也许这种操作出现的原因,就在于css和js阻塞浏览器的不同阶段。但我依然觉得这种操作的应用场景会非常的小。

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2018-07-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极客编程

如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)

通常,使用测试驱动开发(TDD)最困难的部分是开始。你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这...

1111
来自专栏知晓程序

开发 | 这 4 个绝招,让你的小程序告别卡顿,流畅如飞

1482
来自专栏向治洪

关于React Native项目在android上UI性能调试实践

我们尽最大的努力来争取使UI组件的性能如丝般顺滑,但有的时候这根本不可能做到。要知道,Android有超过一万种不同型号的手机,而在框架底层进行软件渲染的时候是...

3375
来自专栏Google Dart

AngularDart4.0 英雄之旅-教程-04明细 顶

在此页面中,您将扩展“Tour of Heroes”应用程序,以显示英雄列表,并允许用户选择英雄并显示英雄的详细信息。

1233
来自专栏Golang语言社区

【Golana语言社区】window应该开发之--cmd杀进程

首先还是给大家简单的介绍下go语言在windows下的应用开发中,例如查杀进程,获取进程的相关数据;操作注册表等等,抑或开发外挂等;用c或者C++,都...

36113
来自专栏WindCoder

WordPress中通过Ajax评论分页实现方法

一直看着评论一线到底,感觉有点不舒服,看到主题君欲思大大那的评论也分页了,就向大大求援了一下,大大酷酷的回了一句paginate_comments_links函...

2811
来自专栏编程微刊

浅谈移动端页面无刷新跳转问题的解决方案

4094
来自专栏FSociety

使用selenium实现前程无忧简历自动刷新

使用过前程无忧,智联招聘等这些招聘网站的都知道,网站都会有一个简历刷新功能,hr那边检索简历都时候网站会根据求职者简历的刷新时间来进行排序,所以如果你想要你的简...

5512
来自专栏iOSDevLog

Xcode 10

Xcode 10包含为所有Apple平台创建出色应用所需的一切。现在Xcode和Instruments在macOS Mojave上的新Dark Mode中看起来...

1482
来自专栏magicsoar

微信储存数据的分析

iphone上微信聊天记录的储存分析 由于隐私的原因,这里不能将自己的聊天记录奉献出来 设备:越狱后的iphone5 ios7.0.4            微...

46910

扫码关注云+社区

领取腾讯云代金券