0

Can someone please explain what the author means below by saying that "native XHR streaming" is more efficient than "XHR polling."

I'm very interested to know if there's a more efficient way to stream data from the server to client (using XHR - this is not a question about web-sockets). From what I can tell SSE's basically just provides a API for doing a "chunked" server response and adds some feature like connection resume. Has there actually been a performance increase in the SSE implementation?

While a polyfill will provide a consistent API, be aware that the underlying XHR transport will not be as efficient:

XHR polling will incur message delays and high request overhead. XHR long-polling minimizes latency delays but has high request overhead. XHR streaming support is limited and buffers all the data in memory.

Without native support for efficient XHR streaming of event stream data, the polyfill library can fallback to polling, long-polling, or XHR streaming, each of which has its own performance costs.

High Performance Browser Networking by Ilya Grigorik https://hpbn.co/server-sent-events-sse/#emulating-eventsource-with-custom-javascript

Charlie
  • 2,004
  • 6
  • 20
  • 40
  • Doesn't that very quote explain what is inefficient about XHR polling? – Bergi Oct 24 '16 at 15:32
  • I understand that XHR polling is inefficient - I'm asking why is SSE more efficient. You could argue that neither are efficient but that's not my question. – Charlie Oct 24 '16 at 17:56
  • 1
    Because it uses only a single connection/single request, does have low latency, and uses no unnecessary buffering? – Bergi Oct 24 '16 at 18:10
  • OK - how does it do that? A chunked connection also does the same except maybe the buffering - what changed on the browser side to make SSE more efficient i.e. why can't you just pollyfill and get the same result? – Charlie Oct 24 '16 at 19:03
  • Yes, like the quote says - a chunked (streaming) XHR does use buffering (and also has worse browser support than SSE). You *do* get the same result when using it as a polyfill - only you also get higher memory consumption. – Bergi Oct 24 '16 at 20:17
  • OK so some browsers have added an ability to partially buffer event messages - can you please point me to some info about that? I've looked through the Chrome and Firefox docs can't find anything. I will mark as answered if you can find something. – Charlie Oct 25 '16 at 15:03
  • From the article you linked: "*Unlike a raw XHR connection, which buffers the full received response until the connection is dropped, an SSE connection can discard processed messages without accumulating all of them in memory.*" – Bergi Oct 25 '16 at 15:19
  • Yes I read that but why can't a find anything about it in the Chrome or Firefox docs - shouldn't something like this be explained somewhere? I thought SSE was just a proposal and that the actual implementation varies. Is there any info anywhere on how its actually implemented? – Charlie Oct 25 '16 at 15:21
  • Well both FF and Chrome are open-source, so you can read the implementation itself, but I doubt there is any documentation about this. I already wonder what you mean by "Chrome of Firefox docs" - do you have links? It's just that the XHR interface prevents this optimisation, while SSE allows it, and it's rather trivial to implement. – Bergi Oct 25 '16 at 15:27
  • OK I found it here - I wouldn't say 1300 LOC is trivial but its better than nothing. https://dxr.mozilla.org/mozilla-central/source/dom/base/EventSource.cpp – Charlie Oct 25 '16 at 15:37
  • I meant implementing the optimisation to clear the buffer after the event is emitted is trivial, assuming you had the rest already :-) – Bergi Oct 25 '16 at 16:23

1 Answers1

1

XHR streaming and SSEs are very similar in terms of performance except that XHR streaming is generally considered "an unsupported feature in modern browsers" because there's no way to clear the buffer unless you reconnect. This answer explains all that and proposes a very cumbersome workaround: Memory efficient message chunk processing using a XMLHttpRequest.

The SSE implementation simply clears the buffer after each event is received see: https://dxr.mozilla.org/mozilla-central/source/dom/base/EventSource.cpp.

Community
  • 1
  • 1
Charlie
  • 2,004
  • 6
  • 20
  • 40