前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css一样追踪你,清空缓存也没有用

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

作者头像
web前端教室
发布2018-07-30 12:03:03
7020
发布2018-07-30 12:03:03
举报
文章被收录于专栏:web前端教室

一直以来,网站要追踪用户的操作和信息,都需要用到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阻塞浏览器的不同阶段。但我依然觉得这种操作的应用场景会非常的小。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-07-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 web前端教室 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档