JSON-Patch decreases UI latency – Benchmark

The latency of an application is not just about data transfer time. Once you have received data from the network, you have to process it and display it.

We are going to do a UI benchmark based on the bike demo available on github and the branch streaming simple. This demo displays in realtime the bikes available in different cities, Lyon/France in our case.

Both implementations use streamdata.io to stream the data from the API provider (JCDecaux). Hence, streamdata.io server pushes updates in JSON, containing patches (JSON-Patch) with new bike availability. The first example (streaming simple) re-displays the entire UI every time a patch is received and applied. The second example (master branch) displays only the modifications deduced from the patch.

bike_simple

Streaming simple – entire UI reloaded

=> The Javascript console shows the content of the patch received. Note that when the content is just one line (move operation), the patch is not related to the UI.

 


bike_master

Bike demo master – only the patch is displayed

=> The Javascript console shows the time to refresh the UI every time a patch is received.

Note: Benchmark was performed on
            Chrome Version 44.0.2403.157 (64-bit)
            Ubuntu 14.04.3 LTS
            4CPU Intel Core i5 @3.2 GHz
            12GB RAM

The perf log in the Javascript console contains the patch processing time and the UI display time. In the first case, we have a latency between 199ms and 300ms because the entire UI is redisplayed after the patch has been applied. Regarding the second example, the perf log on the first 4 lines corresponds to the patch processing time: it is below 0.2ms. The last perf log corresponds to a patch with UI data to update. Consequently, the UI is refreshed but only for the relevant parts (blue icons): the display time is 7.209ms. I collected other results and they are always below 13ms.

In this example, using JSON-Patch allows to refresh only the relevant parts of the page:

The UI is displayed 20 times faster!!

wooow

 

You can also guess this has a huge impact on the battery consumption… But we will see that in another post!

Share it :
0100

Give it a try!

Try streaming any JSON REST API within 30 sec
curl -v "https://proxy.streamdata.io/http://mysite.com/myJsonRestService?param1=[]&param2=[]"

Leave a Reply

Your email address will not be published. Required fields are marked *