--- # 主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate # 贡献主题：https://github.com/xitu/juejin-markdown-themes theme: juejin highlight: --- 对于统计页面数据这样的情景（俗称埋点），我们常用的方式就是动态创建\或\，至于原因，一般有以下几点： 1. 埋点一般不用关心请求的结果 2. 可以实现跨域请求 3. 无需使用ajax就能达到发请求的目的 4. 都是原生实现，兼容性好现就两种方式做一下对比和总结： ### 一、用法 #### 1.动态创建\ **方式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.动态创建\ 只有一种方式：通过\标签 ``` function sendByScript(src){ var script = document.createElement("script"); script.src = src; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script); } ``` ### 二、区别 #### 区别1:`如果要触发请求，动态创建的 ``` 用chrome浏览器打开此HTML文件，查看network： ![network](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5cb6c1e20d814ad8a3778b7bd8fa200d~tplv-k3u1fbpfcp-watermark.image) 可以看到，插入DOM中的\触发来请求，而未插入DOM中则没有发起请求；动态创建的\的两种方式没有插入DOM，都触发请求。那么问题来了，**`为什么动态创建的