navigator.sendBeacon是否应为同步？点击链接触发时阻塞跳转是否正常

你遇到的这个现象不是sendBeacon的官方预期行为。
sendBeacon本身的设计就是异步非阻塞的，调用后会立刻返回布尔值表示请求是否成功入队，正常不会等待服务端响应就会继续执行后续逻辑。

会出现跳转被阻塞的情况，和浏览器处理点击事件、页面导航的逻辑有关：部分浏览器在执行完同步的onclick逻辑后，触发页面前往新地址的导航前，会等待当前事件周期内发起的请求的状态确认，当你在服务端给sendBeacon的接口打了断点后，这个请求的响应被卡住，连带浏览器的导航逻辑也被误阻塞了。

你可以用两种方案解决这个问题：

• 用setTimeout把sendBeacon的调用放到异步任务队列，不阻塞同步的点击事件流程：

<a href="https://someurl.com" onclick="setTimeout(() => navigator.sendBeacon('https://internalurl.com/'), 0)">Click Here</a>

• 显式阻止默认跳转，调用sendBeacon后手动执行跳转，兼容性更强：

<a href="https://someurl.com" onclick="event.preventDefault(); navigator.sendBeacon('https://internalurl.com/'); location.href = this.href;">Click Here</a>

内容的提问来源于stack exchange，提问作者sheamus