As a part of performance testing for Kamehameha and Claude, Dr. Remy and I wanted to look at not only network latencies, but also what kind of difference asynchronous vs. synchronous calls would make. Since the ajax requests that update the skeleton data in Kamehameha are called by a JavaScript timer, it complicates what "asynchronous" and "synchronous" really mean in terms of the ajax call and the rest of the JavaScript.
JavaScript is completely serial; there is no true concurrency within the language itself. However, after an ajax call is made JavaScript can either halt script execution until the response is received or it can continue execution and handle the data returned by the call at a later time using event handlers. All my work with Kamehameha up to this point had been using synchronous ajax calls. The benefit in this is a guarantee that data will be received in order. You don't really want the "next" set of data until the previous call has finished anyways so serial ajax calls meets our needs. But out of curiosity, I wanted to see the effects of asynchronous calls. Additionally, I had been testing Kamehameha at a rate of one call per 50ms. What would happen when I make that rate quicker? What about 1ms? And how would the two different types of ajax calls handle it?
One other thing that tricked me at first is how JavaScript setInterval works. Even though I was making the ajax calls serially, what did that mean for the 50ms timer I created on the page? If the ajax call took longer than 50ms would the timer still fire the getData function again? The answer is no. Because the ajax call was synchronous, JavaScript did not consider the getData function to have finished until the ajax call was done. JavaScript's timers (setInterval) also will not call a function again if the last call to it has not finished. So as a result, past a certain threshold of calls per ms, the getData function would reach a maximum performance and calls would simply happen as fast as the ajax response would allow it.
Now changing the ajax calls to asynchronous causes more interesting things to happen. JavaScript no longer has to wait for the ajax request to be over to consider the entire getData function to be done. The getData function is done as soon the as the ajax call is started. There is no need for it to wait for the response. This means that the limit on the number of ajax calls is now determined by how quickly an ajax call can be initialized and sent, no wait time included. This should theoretically perform better than synchronous ajax calls. The network link between Kamehameha and Claude, the server hosting the data, can now be though of a pipeline. Rather than sending something through and waiting for it to come all the way back, multiple things can be sent in one after the other and responses will come back at, hopefully, the same intervals apart as they were sent. Due to the way networks transfer packets, the delay between ajax responses will definitely not be the same as it went in
but it should at least be smaller than the delay between synchronous ajax responses.
I have updated the Kamehameha code to include a performance html file. It is a replica of the original kamehameha html/javascript page but with additional code to print some debug information. I haven't added time metrics yet but that will be a small change. Currently each ajax call is given an id that is simply the ajax call count up to that point. At the time the ajax call is started, a debug message is printed to indicate so. Then, when the ajax call finally ends, another message is printed also including the id. For synchronous calls, the ids are always in order and one id must start and finish before the next occurs. But for the asynchronous calls pretty much anything can happen. The only guarantee is that the starting calls will be in chronological order. However, the end time for a call can happen much later or much sooner than other starting and ending calls.
Maxing out the timer interval (or rather, minimizing it) for asynchronous ajax calls did not produce any visible differences to the skeleton rendering, despite the fact that many calls were coming out of order (as seen by the debug output). I have yet to come up with a metric for the "accuracy" of the skeleton rendering, that is to measure how badly the ordering of ajax responses is of the asynchronous version to the performance boost it provides. Additionally, once I add code to get the actually timing, tests will be conducted on the local network and over the internet.