1. + GIF / Pixel 上報

原理：   通過在頁面上動態(tài)創(chuàng)建一個Image對象，把要上報的數(shù)據(jù)編碼到請求 URL 的 query 參數(shù)中，然后加載一個 1x1 的透明 GIF 圖片（當(dāng)然不需要真的返回一張圖，后端 204 也行），重點是通過src請求資源的同時，讓服務(wù)端記錄.gif后的數(shù)據(jù)。

代碼示例：

const img = new Image();
img.src = `https://logserver.com/collect?event=click&userId=123`;

優(yōu)點：

• 兼容性超好，從古早 IE 到現(xiàn)代瀏覽器都能用。
• 不受 CORS 限制，因為圖片加載天然跨域。
• 簡單，幾乎不會影響頁面性能。

缺點：

• 請求量小，受 URL 長度限制（一般 2KB 左右）。
• 只能 GET，不能 POST。
• 無法拿到發(fā)送成功或失敗的準確回調(diào)。

適用場景：

• 簡單 PV/UV 打點，曝光上報。
• 無需保證必達，只要發(fā)出請求就行。

2. fetch / XMLHttpRequest 上報

原理：   使用fetch或者XMLHttpRequest直接發(fā) HTTP 請求，數(shù)據(jù)格式可以是 JSON 或表單數(shù)據(jù)，GET/POST 都行。

代碼示例：

js
 體驗AI代碼助手
 代碼解讀
復(fù)制代碼
// fetch版
fetch('https://logserver.com/collect', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ event: 'click', userId: 123 })
});

優(yōu)點：

• 可以 POST，支持大體積數(shù)據(jù)。
• 可以拿到請求成功或失敗的反饋。
• 靈活，能帶復(fù)雜頭部，比如認證信息。

缺點：

• 受 CORS 限制，需要服務(wù)器支持。
• 發(fā)送過程中可能阻塞主線程，尤其是同步 XHR。
• 如果頁面關(guān)閉得太快，可能請求還沒發(fā)出去（不過可以用keepalive選項優(yōu)化）。

適用場景：

• 錯誤日志、性能埋點。
• 需要可靠上報、需要認證或者復(fù)雜參數(shù)時。

3. navigator.sendBeacon

原理：   專門為這種場景設(shè)計的 API，可以在頁面卸載（比如跳轉(zhuǎn)、關(guān)閉）時，異步且可靠地把數(shù)據(jù)發(fā)送到服務(wù)器，不阻塞頁面卸載流程。

代碼示例：

navigator.sendBeacon('https://logserver.com/collect', JSON.stringify({ event: 'unload', userId: 123 }));

優(yōu)點：

• 適合頁面關(guān)閉前發(fā)送數(shù)據(jù)，不容易丟包。
• 不阻塞 unload 流程，不卡界面。
• 支持 POST，發(fā)送簡單。

缺點：

• 兼容性略差（但現(xiàn)在主流瀏覽器基本都支持了）。
• 不支持自定義請求頭。
• 只支持 Content-Type 是application/x-www-form-urlencoded或text/plain的請求體。

適用場景：

• 頁面 unload 時的上報，比如用戶行為日志、退出日志。

4. WebSocket 上報

原理：   建立長連接，把日志實時推送到服務(wù)器。

優(yōu)點：

• 實時性超強。
• 理論上吞吐量高，連接一旦建立數(shù)據(jù)傳輸非常輕量。

缺點：

• 建連、?；钣谐杀?，移動端或弱網(wǎng)環(huán)境下容易掉線。
• 服務(wù)端也要有能力管理大量持久連接。
• 不適合小流量、輕量應(yīng)用。

適用場景：

• 高實時要求的埋點，比如游戲、IM、股票類應(yīng)用。

總結(jié)

實際開發(fā)里，我們會根據(jù)業(yè)務(wù)場景，多種方式結(jié)合使用：普通打點用fetch，頁面 unload 用sendBeacon，曝光用Image兜底，再加一些重試機制，做到不丟、不卡、可靠。

以上就是前端JS日志采集的幾種方式盤點的詳細內(nèi)容，更多關(guān)于前端JS日志采集方式的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論