1. Traditional approach > Data buffering on each layer
2. Streaming + Progressive loading
3. Latency matters:
- Amazon : every 100 ms increase in load time of Amazon.com 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