前端埋点数据怎么上报？，这是一道前端面试非常高频的面试题，但是很多同学在面试时候都回答不完整，老规矩，点赞收藏支持一下，给我一分钟，理想哥教大家该怎么满分回答这个问题

如果我是求职者，我会这么回答：

目前常见的方案有以下四种：

第一种，基于ajax的埋点上报。

前端可以和后端约定一个接口通过ajax去进行数据上报。这种方式的优点是可以灵活地设置请求头属性，post请求可以发送大体量数据，满足特定场景的埋点需求。缺点是可能会存在跨域风险，当页面销毁时的监控埋点大概率会上报失败。

第二种，基于Image的埋点上报。

前端通过创建一个Image对象，将要上报的数据作为URL参数拼接到一个1x1像素的透明图片src属性中实现数据上报。目前有挺多公司会采用这种方案，优点是没有跨域问题，兼容性好，速度快，不会阻塞页面加载和关闭。缺点是只能发送get请求，不支持异步操作。

第三种，基于Navigator.sendBeacon的埋点上报

这是目前通用的埋点上报方案。sendBeacon是w3c新引入的补充性api，可以用来解决web页面在触发卸载销毁事件期间会中断所有异步xhr请求的问题。可以接收两个参数，第一个是目标服务器的 URL，第二个是要发送的数据。

优点是，页面销毁时埋点数据也可以正常发送，不会阻塞页面关闭。缺点是只支持post请求，而且因为是新补充的api，会存在浏览器兼容性问题。

第四种，基于WebSocket。

这种方案目前不常用。通过WebSocket协议与服务器建立持久连接，并通过发送消息来进行实时的埋点数据上报。优点是实时性好，支持双向通信。缺点是需要服务端支持WebSocket协议，实现方案复杂，不适用简单的埋点需求。

所以，如果是上报轻量级的数据，可以使用基于img方案，如果需要大量级的数据且有很多自定义数据，可以使用基于ajax或者基于WebSocket方案，如果需要在用户关闭浏览器时上报数据，可以使用sendBeacon，但是需要增加判断，如果浏览器不支持sendBeacon，需要降级为img方案。

以上就是这个问题的回答了，大家可以下次面试时试试这么回答看看效果。

最后，欢迎关注理想哥，每天学点前端面试小技巧。