Which Web Data Reporting Method Is Best? Ajax vs Image vs Beacon vs Fetch

1. Background

In daily business there are common scenarios such as data collection, exception handling, performance monitoring, etc., whose data share common characteristics:

No callback required;

Data is lightweight (mostly);

No cookie credentials needed (cross‑domain friendly);

Key concern is whether the send succeeds (in edge cases like page navigation, refresh, etc.).

2. Which reporting method is most perfect?

Various ways exist to interact with a server—xhr, fetch, script tag, img tag, link tag, CSS background image, etc.—each with pros and cons. We focus on four common methods: Ajax, Image, Beacon, fetch.

3. Feature analysis

1. Ajax

Implemented via the XMLHttpRequest API, supported by all major browsers.

Advantages

Asynchronous by default, does not block the page;

No size limit for POST data;

Data resides in the request body, offering strong security;

Broad compatibility with modern browsers.

Disadvantages

Must handle cross‑origin restrictions;

Poor performance when the page is navigated away, refreshed, or closed;

Synchronous mode blocks the flow and harms user experience.

2. Image

Sets the src of an img tag, appending data as a query string and sending it via GET.

var img = new Image();
img.src = url;

Advantages

Simple and naturally cross‑domain;

No blocking issues;

Works in all browsers.

Disadvantages

Data size limited to roughly 2–8 KB depending on the browser;

GET method has weaker security (risk of data leakage, abuse, extensions);

Sending reliability is average when the page is navigated away or refreshed.

3. Beacon

The navigator.sendBeacon API, built on fetch, queues the request to be sent asynchronously when the browser is idle, without delaying page unload.

Advantages

Asynchronous and non‑blocking;

Good reliability when the page is closed or refreshed;

Typical payload limit around 64 KB;

No cross‑origin restrictions;

POST method provides strong security;

Reasonable browser support (all except IE).

Disadvantages

Only indicates that the request was queued, not that it succeeded;

Cannot set custom request headers.

console.log('Send Beacon: ', navigator.sendBeacon(url, data)); // true if queued

4. fetch

The fetch API offers a more powerful and flexible alternative to Ajax, returning a Promise. With the keepalive option it behaves similarly to sendBeacon.

Advantages

Configurable cross‑origin;

Asynchronous and non‑blocking, providing good user experience;

Supports both GET and POST, and custom request headers.

Disadvantages

Payload limit around 64 KB when using keepalive;

Browser compatibility is still limited.

fetch(url, {
  method: 'POST',
  body: data,
  keepalive: true,
  // mode: 'cors'
});

4. Experimental results (reliability, security, user experience)

In scenarios like onbeforeunload, onunload, onpopstate, Ajax and fetch without keepalive perform worse than Beacon, Image, and fetch with keepalive.

Overall pros and cons of each reporting method are summarized below.

5. Conclusion (no perfect method, only the most suitable)

Image : Best for small payloads with broad browser compatibility, such as page views, clicks, exposures, and performance monitoring.

Ajax : Suitable for larger payloads that require callbacks for front‑end rendering, at the cost of some user‑experience trade‑offs.

Beacon : Ideal for precise statistics in page‑navigation or unload scenarios, offering the highest success rate.

fetch : Gradually replacing Ajax, but still faces compatibility challenges, especially with older browsers.

In practice, combining methods can achieve a “1 + 1 > 2” effect—for example, using Beacon when available, otherwise falling back to Image, as done by some analytics SDKs.

if (sendType === 'beacon' && typeof navigator.sendBeacon !== 'function') {
  sendType = 'image';
}

References

[1]

Underlying fetch‑based implementation of navigator.sendBeacon: https://blog.yunishare.cn/posts/tech-article/navigator-sendBeacon-api.html [2] Using the keepalive option with fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch