浏览器network中的ping请求

发表于 2024-05-31 更新于 2024-11-21 本文字数： 928 阅读时长 ≈ 2 分钟

本文介绍关于浏览器network中的ping请求，包括使用场景、实现细节等，以提高关于浏览器network中的ping请求的效率。

Chrome浏览器的network中经常会看到ping类型的请求，好奇是怎么发起又有什么作用呢。这里分析总结下。

navigator.sendBeacon

调查后发现ping类型请求是通过navigator.sendBeacon发起，该方法可携带数据。实际上发送的还是post请求。即服务端还是按照post请求去处理和返回。

该请求是由浏览器异步发起的，发起方是navigator并非是所在网页内的单线程JS。由于这个特性，网页的开关不会影响这个请求的执行。

举个例子

比如unload页面时，可以通过sendBeacon发送请求告诉服务端用户关闭了网页，如果是传统的使用XHR或者fetch，其实可能请求还没发出去网页就已经关闭，而通过sendBeacon就没有这种风险。

极端情况下除外，比如浏览器异常关闭或者电脑直接关机了，这种肯定是没办法了。

sendBeacon请求在不同浏览器下显示上会有所不同。

不过糟糕的是以Chrome为例，在network中无法直接快速筛选出ping类型请求，只能选择other或者通过请求URL去筛选。

具体如何发起该请求呢，这里举个例子。

1
2
3

navigator.sendBeacon('/beacon', new Blob([JSON.stringify({
 type: 'hello'
})], {type: 'application/json'}));

该方法的特性决定了很适合做数据埋点，比如页面关闭时发送消息。

在实际的项目中我也发现数据上报类库会采用sendBeacon来实现。

我所了解的就这些了。