DEMO Streaming vs Buffering


1. Traditional approach > Data buffering on each layer




2. Streaming + Progressive loading



3. Latency matters:

Amazon : every 100 ms increase in load time of decreased sales by 1%. 

Google: moving from a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20% 

Google Maps: when the home page was reduced from 100KB to 70-80KB, traffic went up 10% in the first week, and an additional 25% in the following three weeks

4. Demonstration / comparison

Browser support note: 

  • Progressive loading is compatible with IE6+ but works best on IE11+ or ALL other modern non-IE browsers. 

Testing recommendations : 

  • Click "Test" several times to compensate heating up effect
  • Open you browser's Dev Tools / Network inspector to see what latency/concurrency/response time you get
  • Try hitting "Test" 10 or more times within 1 second to see in Network inspectort how it scales
  • Download the WAR to test it on you company's infrastructure. ( WAR from Maven repositiry or Sources on GitHub )

5. Streaming approach:

JSON data is transfered to the browser concurrently with data reception from the database.

  • Improved response time
  • Low latency
  • No OutOfMemory with big data sets / under heavy load
  • Higher concurrency
  • Data volume can even exceed the heap size


6. Streaming + Progressive XHR loading

  • Display the first page immediately and keep loading the rest of data in backgournd
  • Callbacks for partial and complete result sets, per-call configurable block sizes