ping属性是html5为a标签引入的原生点击追踪机制，用户点击时浏览器自动向指定url发异步post请求，不阻塞跳转；但需同时满足href合法、ping值为绝对url、服务端返回204/200且配cors才生效，且safari默认禁用、firefox已移除支持。
什么是 ping 属性，它真能“无感”发请求？
ping 属性确实会在用户点击 <a></a> 链接时，由浏览器自动向指定 URL 发起一个 POST 请求（实际是带 Beacon 特性的后台请求），不阻塞跳转、不显示在开发者工具的「Network」主列表里（需勾选「Preserve log」并留意 beacon 类型请求），表面看“无感”。但注意：它不是静默的——若目标地址返回非 2xx 状态、跨域且未配 CORS、或被浏览器拦截（如 Safari 默认禁用），控制台仍会报 Failed to execute 'ping' on 'HTMLAnchorElement' 错误。
怎么写才让 ping 实际生效？
必须同时满足三个条件，缺一不可：
-
href必须是同源或合法跨域地址（否则跳转失败，ping不触发） -
ping值必须是绝对 URL（不能是相对路径，如ping="track.php"会直接忽略） - 目标服务端需响应
204 No Content或200，且返回头包含Access-Control-Allow-Origin: *（跨域必需）
示例有效写法：
<a href="https://example.com/page" ping="https://tracker.example.com/click?from=home">访问页面</a>
Chrome 和 Safari 对 ping 的支持差异有多大？
Chrome 自 14 版起支持，但默认启用；Safari 自 14.1 起支持，却**默认禁用**——用户需手动开启「开发 → 启用 Ping 跟踪」，否则所有 ping 请求静默丢弃，控制台也无提示。Firefox 已于 2022 年移除支持（Navigator.sendBeacon() 是更通用替代）。这意味着：靠 ping 做全量点击追踪，在 Safari 上基本失效，且无法通过 JS 检测其是否可用（没有标准 API 返回支持状态）。
为什么建议优先用 sendBeacon() 替代 ping？
ping 的核心问题是不可控、不可调试、兼容性差。而 sendBeacon() 在 beforeunload 或 visibilitychange 中调用，能明确捕获点击意图，支持自定义 payload，且所有现代浏览器均支持：
document.querySelector('a[data-track]').addEventListener('click', e => {
const url = e.target.dataset.track;
navigator.sendBeacon(url, JSON.stringify({ ref: document.referrer }));
});
关键点：
- 必须用
sendBeacon()，不用fetch()（页面卸载时会被终止） - payload 只能是
ArrayBufferView、Blob、FormData或字符串，不能直接传对象 - 发送上限约 64KB，超限静默失败，无错误抛出
真正落地时，ping 更像一个历史遗留彩蛋，而非可靠追踪手段。它的“无感”只存在于理想同源 + Chrome 环境下，其他情况要么失效，要么需要额外兜底逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
