Something unusual caught my attention while working with ajax calls. There seems to be a consistent 300ms delay in every other ajax call.
In the network section, you can see what the requests look like here. Upon examining the details of the calls, I noticed differences between a fast ajax call and a slow ajax call, particularly in two additional fields - DNS lookup and Initial Connection.
I'm puzzled by this inconsistency in performance. How can I ensure that all ajax calls deliver consistent results?
The test code:
<body>
<input type="button" class="btn" id="testButton" value="Test"/>
</body>
<script>
document.getElementById('testButton').onclick = function() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log('done');
}
};
xhttp.open("GET", "{% url 'test_ajax' %}", true);
xhttp.send();
}
</script>
def test_ajax(request):
return JsonResponse({'a': 'a'})
UPDATE: I even tried using jQuery for the ajax call, but the issue persists.