详解JavaScript发送埋点请求的两种方式
目录
- 一、用法
- 1.动态创建<img>
- 2.动态创建<script>
- 二、区别
- 区别1
- 区别2
- 三、选择哪种方式
- 四、总结
对于统计页面数据这样的情景（俗称埋点），我们常用的方式就是动态创建<img>或<script>，至于原因，一般有以下几点：
1.埋点一般不用关心请求的结果
2.可以实现跨域请求
3.无需使用ajax就能达到发请求的目的
4.都是原生实现，兼容性好
现就两种方式做一下对比和总结：
一、用法
1.动态创建<img>
方式1：通过img标签
function sendByImg(src) {
var img = document.createElement("img");
img.src = src;
}
方式2：通过Image对象
function sendByImage(src) {
var img = new Image();
img.src = src;
}
2.动态创建<script>
只有一种方式：通过<script>标签
function sendByScript(src){
var script = document.createElement("script");
script.src = src;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
}
二、区别
区别1
如果要触发请求，动态创建的<script>必须要插入到DOM中，而动态创建的<img>则不需要
演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Img VS Script</title>
</head>
<body>
<h3>
请观察浏览器中的Network和Elements！
</h3>
<script>
function sendByScript(src){
var script = document.createElement("script");
script.src = src;
}
function sendByScriptInsertDOM(src){
var script = document.createElement("script");
script.src = src;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
}
function sendByImage(src) {
var img = new Image();
img.src = src;
}
function sendByImg(src) {
var img = document.createElement("img");
img.src = src;
}
function sendRequest(src) {
//一、通过script：
//不插入DOM，不会触发请求
sendByScript(src + '/byScript');
//插到DOM中，会触发请求
sendByScriptInsertDOM(src + '/byScriptDOM');
//二、通过img：
//不插入DOM，不会触发请求
sendByImage(src+ '/byImage');
//不插入DOM，不会触发请求
sendByImg(src+ '/byImg');
}
sendRequest('https://wwww.baidu.com')
</script>
</body>
</html>
用chrome浏览器打开此HTML文件，查看network：
可以看到，插入DOM中的<script>触发来请求，而未插入DOM中则没有发起请求；动态创建的<img>的两种方式没有插入DOM，都触发请求。
那么问题来了，为什么动态创建的<script>必须要插入DOM中才会触发请求，而动态创建的<img>则不用？关于这个问题，在网上查了很久也没有找到特别强有力的解释。有人说是因为这两种标签本身的特性决定的：<img>作为展示性标签加载的是图片资源，其对应的地址可以直接访问就能得到资源；<script>往往加载的是JavaScript代码，需要网页这样的执行环境。个人觉得此解释有些牵强，但也没有找到更权威的解释。如果有更好的观点，欢迎留言。
区别2
动态创建的<script>可以对请求结果进行处理，而动态创建的<img>做不到
JSONP的实现原理就是借助动态创建<script>标签，并对返回结果进行处理。
至此，我当时在想，那么借助jQuery发送JSONP请求，岂不是每发一次就要在页面上创建一个<script>标签？观察结果显示并没有。于是去看了下jQuery的源码：
如图所示，在<script>加载完成或出错后将标签移除。所以，我们在用动态创建<script>方式发送请求也可以参考这种方式。
三、选择哪种方式
单纯从发送请求的角度看，理论上两者没有特别大的差异，但有一点一定要注意：动态创建<img>的方式在浏览器禁用图片模式下不会触发请求。
例如，在chrome浏览器中设置禁图模式（设置>高级设置>隐私设置和安全性>网站设置>图片>显示全部 去掉），结果：
只有动态创建<script>的方式有请求，动态创建<img>的方式没有任何请求记录。
综上，从扩展性和兼容性上看，动态创建<script>的方式是首选。
四、总结
对于发送埋点请求这种应用场景，我们有两种简单的处理方式：动态创建<script>和<img>两种方式，两者最大的差异是：动态创建的<script>必须插入到DOM中才能触发请求，而动态创建<img>的方式则不需要。但动态创建<img>的方式有个致命缺陷：浏览器设置了禁止图片显示时，无法触发请求。所以，对于封装埋点库的时候，动态创建<script>的方式是首选，而且可以参考jQuery，在请求记载完成后对<script>进行清除。
以上就是详解JavaScript发送埋点请求的两种方式的详细内容，更多关于JavaScript发送埋点的资料请关注我们其它相关文章！
相关推荐
-
HTML+JS实现监控切屏功能
目录 项目描述 记录离开页面 创建html 监控是否离开页面 监控是否切屏 记录时间 离开次数 项目描述 该项目是我在网上看其他博客的时候无意中看到的,看见别人居然能实现这种操作很好奇 项目要求做到 监控网页状态 记录离开次数 离开时间 记录离开页面 实现这个切换页面功能需要用到一个web的APIvisiblitychange visibilitychange - Web API 接口参考 | MDN (mozilla.org) Document.visibilityState - Web AP
-
javascript 利用Image对象实现的埋点(某处的点击数)统计
需求:统计用户页面某处的点击数或者执行到程序中某个点的次数 特点:根据实际情况,创建多个Image对象,原则谁空闲谁做事.解决因过快发送埋点数据导致部分埋点缺失的问题. 实现:(注下面的代码依赖jQuery) 复制代码 代码如下: var Statistic= { arrImg:[], log:function(from){ //如果参数为空,则不处理 if(typeof(from)=="undefined" || from=="") return; var me=
-
js内存泄漏场景、如何监控及分析详解
目录 前言 哪些情况会引起内存泄漏 1. 意外的全局变量 2. 遗忘的定时器 3. 使用不当的闭包 4. 遗漏的 DOM 元素 5. 网络回调 如何监控内存泄漏 如何分析内存泄漏,找出有问题的代码 实例分析 总结 前言 Q:什么是内存泄漏? 字面上的意思,申请的内存没有及时回收掉,被泄漏了 Q:为什么会发生内存泄漏? 虽然前端有垃圾回收机制,但当某块无用的内存,却无法被垃圾回收机制认为是垃圾时,也就发生内存泄漏了 而垃圾回收机制通常是使用标志清除策略,简单说,也就是引用从根节点开始是否可达来判定
-
JavaScript利用img实现前端页面埋点功能
目录 数据类型 技术方案 如何设计 完整代码 总结 做数据分析的时候,可能会遇到一个问题:如何获取足量的有效数据.简单记录用户登录IP肯定是不能满足要求的,这个时候就需要我们在前端页面埋点,也就是数据采集点.如何来实现一个前端埋点功能,本文就带你上手试试. 数据类型 首先,我们需要明确埋点需要哪些数据,这个和具体的业务需求有关.但是我们设计的时候,还是应该尽量考虑: pv:页面访问量 uv:用户访问量 自定义事件 页面性能加载数据 报错信息 埋点数据范围清晰了,那么怎么来实现埋点呢? 技术方案
-
vue+flv.js+SpringBoot+websocket实现视频监控与回放功能
目录 需求: 思路: 准备工作: 实现: 最后: 需求: vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能. 之前项目里是纯前端实现视频监控和回放功能.但是有局限性.就是ip地址必须固定.新的需求里设备ip不固定.所以必须换一种思路. 通过设备的主动注册,让设备去主动连接服务器后端通过socket推流给前端实现实时监控和回放功能: 思路: 1:初始化设备.后端项目启动时就调用初始化方法.2:开启socket连接.前端页面加载时尝试连接so
-
js前端埋点监控解析
一.为什么需要埋点&监控 在开始正文之前,我们先想想为什么需要埋点&监控? 当我们在分析复盘一个产品是否成功的时候,不同的角色考虑的方向是不同的. 站在产品的视角,经常会问如下几个问题: 1.产品有没有用户使用 2.用户用得怎么样 3.系统会不会经常出现异常 4.如何更好地满足用户需求服务用户 当站在技术视角时,经常会问如下几个问题: 1.系统出现异常的频率如何 2.异常出现后如何快速进行定位追踪 3.如何分析解决问题 而当站在老板的视角时,问题可能又会变为: 1.我的存量用户多少,未来还
-
详解JavaScript发送埋点请求的两种方式
目录 一.用法 1.动态创建<img> 2.动态创建<script> 二.区别 区别1 区别2 三.选择哪种方式 四.总结 对于统计页面数据这样的情景(俗称埋点),我们常用的方式就是动态创建<img>或<script>,至于原因,一般有以下几点: 1.埋点一般不用关心请求的结果 2.可以实现跨域请求 3.无需使用ajax就能达到发请求的目的 4.都是原生实现,兼容性好 现就两种方式做一下对比和总结: 一.用法 1.动态创建<img> 方式1:通过
-
详解python连接telnet和ssh的两种方式
目录 Telnet 连接方式 ssh连接方式 Telnet 连接方式 #!/usr/bin/env python # coding=utf-8 import time import telnetlib import logging __author__ = 'Evan' save_log_path = 'result.txt' file_mode = 'a+' format_info = '%(asctime)s - %(filename)s[line:%(lineno)d] - %(level
-
详解Python修复遥感影像条带的两种方式
GDAL修复Landsat ETM+影像条带 Landsat7 ETM+卫星影像由于卫星传感器故障,导致此后获取的影像出现了条带.如下图所示, 影像中均匀的布满条带. 使用GDAL修复影像条带的代码如下: def gdal_repair(tif_name, out_name, bands): """ tif_name(string): 源影像名 out_name(string): 输出影像名 bands(integer): 影像波段数 """ #
-
详解pytorch的多GPU训练的两种方式
目录 方法一:torch.nn.DataParallel 1. 原理 2. 常用的配套代码如下 3. 优缺点 方法二:torch.distributed 1. 代码说明 方法一:torch.nn.DataParallel 1. 原理 如下图所示:小朋友一个人做4份作业,假设1份需要60min,共需要240min. 这里的作业就是pytorch中要处理的data. 与此同时,他也可以先花3min把作业分配给3个同伙,大家一起60min做完.最后他再花3min把作业收起来,一共需要66min. 这个
-
详解Android提交数据到服务器的两种方式四种方法
Android应用开发中,会经常要提交数据到服务器和从服务器得到数据,本文主要是给出了利用http协议采用HttpClient方式向服务器提交数据的方法. 代码比较简单,这里不去过多的阐述,直接看代码. /** * @author Dylan * 本类封装了Android中向web服务器提交数据的两种方式四种方法 */ public class SubmitDataByHttpClientAndOrdinaryWay { /** * 使用get请求以普通方式提交数据 * @param map 传
-
详解Spring Boot 中实现定时任务的两种方式
在 Spring + SpringMVC 环境中,一般来说,要实现定时任务,我们有两中方案,一种是使用 Spring 自带的定时任务处理器 @Scheduled 注解,另一种就是使用第三方框架 Quartz ,Spring Boot 源自 Spring+SpringMVC ,因此天然具备这两个 Spring 中的定时任务实现策略,当然也支持 Quartz,本文我们就来看下 Spring Boot 中两种定时任务的实现方式. @Scheduled 使用 @Scheduled 非常容易,直接创建一个
-
java发送http get请求的两种方式
长话短说,废话不说 一.第一种方式,通过HttpClient方式,代码如下: public static String httpGet(String url, String charset) throws HttpException, IOException { String json = null; HttpGet httpGet = new HttpGet(); // 设置参数 try { httpGet.setURI(new URI(url)); } catch (URISyntaxExc
-
详解IntelliJ IDEA创建spark项目的两种方式
Intellij是进行scala开发的一个非常好用的工具,可以非常轻松查看scala源码,当然用它来开发Java也是很爽的,之前一直在用scala ide和eclipse,现在换成intellij简直好用到飞起,但是有些人不知道怎么用intellij去创建一个spark项目,这里介绍两种 1.选择File->new Project->Java->Scala,这里scala版本是2.11.8 2 .之后一路点击next,直到finish,创建完的项目见下图,这时候已经可以创建scala文件
-
详解Centos下YUM安装PHP的两种方式
在Centos下安装PHP时, 先后使用了两种方式进行实现, 现整理出来以作记录. 摘要 一般Centos下安装软件我们采用源码安装或者RPM包安装的方式,有时候更简单我们可以采用YUM源的方式 安装PHP的时候有个特殊的地方,其有两个YUM源可供选择 Webtatic方式安装升级PHP 安装webtatic源 [root@i-bskmtj6q ~]# rpm -Uvh https://mirror.webtatic.com/yum/el6/latest.rpm Retrieving https
-
详解android与服务端交互的两种方式
做Android开发的程序员必须知道android客户端应该如何与服务端进行交互,这里主要介绍的是使用json数据进行交互.服务端从数据库查出数据并以json字符串的格式或者map集合的格式返回到客户端,客户端进行解析并输出到手机屏幕上. 此处介绍两种方式:使用Google原生的Gson解析json数据,使用JSONObject解析json数据 一.使用Google原生的Gson解析json数据: 记得在客户端添加gson.jar. 核心代码: 服务端: package com.mfc.ctrl