前端埋点数据上传应该怎样实现？

这是一篇埋点总结，刚处理了公司内项目的埋点方案（神策），思考一下如果我自己实现一个埋点，会有什么方案？

通常埋点监控的主要功能是：统计PV（页面访问次数）、UV（页面访问人数）、用户点击操作行为等等。还可以进行页面性能分析（首屏加载时间，白屏时间）。监控收集错误报警信息。

怎样发送数据

使用img的src做请求发送

优点：不用做特殊处理，没有跨域的限制，script标签，img标签都可以直接发送跨域的GET请求，兼容性比较好，有些页面可能禁用了脚本，这时script标签久不能使用了。img就没有这个限制。

当我们使用img的src标签访问的时候，就会触发访问这个get请求。这个时候服务端就会接收到前端发送的请求。

例子：

const send = (url,data) => {
    const imgStr = Object.entries(data).map(([key, value]) => `${key}=${value}`).join("&");
    const img = new Image();
    img.src = `${url}?${imgStr}`;
}

更加方便的web beacon(网络信标)

网络信标（web beacon），又称网页臭虫（web bug），是可以暗藏在任何网页元素或邮件内的1像素大小的透明GIF或PNG图片，常用来收集目标电脑用户的上网习惯等数据，并将这些数据写入Cookie。网络信标在邮件跟踪和垃圾邮件中较为常用。

navigator.sendBeacon()方法可以通过HTTP POST将少量的数据异步传输到web服务器。

目前它主要用于将统计数据发送到web服务器，同事避免使用传统技术（如：XMLHttpRequest）发送分析数据的一些问题。

navigator.sendBeacon(url, data) 
//data可选 data参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据

当用户代理成功把数据加入传输队列时，sendBeacon将会返回true/false

sendBeacon的优点：

• 使用sendBeacon()方法会使用户代理在浏览器空闲时异步的向服务器发送数据,不会和主要业务代码抢占资源，
• 在页面卸载的时也能保证请求成功发送，同时不会延迟页面的卸载或影响下一页面的载入性能。

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon

注意：sendBeacon是有浏览器兼容问题的，所以我们使用的时候为了完善，还是要用img这种方式来进行兜底。

埋点使用

ok，上面我们说完怎样发送数据，现在我们来操作一下。写一个小demo

页面性能监控数据上传

    const send = (url, query) => {
        const navigatorSend = navigator?.sendBeacon(url, query);
        if (!navigatorSend) {
            const str = Object.entries(query).map(([key, value]) => `${key}=${value}`).join("&");
            const img = new Image();
            img.str = `${url}=${str}`;
        }
    }

    const reportPerformance = () => {
        send(url, {
            ...performance.timing,
            uuid: 'xxx'
        });
    }