How to recreate Chrome Waterfall column (Network tab) that documents time required for different stages of network request for jQuery AJAX call?

This question is similar but not helpful.

To provide more feedback to users, we want to mimic the Waterfall column in the Network tab of Chrome, which deconstructs network requests into different stages and times them.

An example is included below.

In the particular, we want to indicate three stages:

  • Time uploading a file
  • Time processing a file on the server
  • Time download results

From the jQuery AJAX docs, it seems like beforeSend could be used to time file uploads. How about download time and time on server (TTFB in screenshot)?

Here’s how we implement AJAX calls:

async function doRequest() {
    // Set server URL.
    let serverUrl = 'https://test.com/test';

    // Set form data
    let imageFile = imageFile

    // Create request form.
    let formData = new FormData();
    formData.append('imageFile', imageFile);

    // Set request settings.
    let settings = {
        url: serverUrl,
        method: 'POST',
        timeout: 0,
        contentType: false,
        processData: false,
        data: formData,
        xhr: function() {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
               if (xhr.readyState == 2) {
                    if (xhr.status == 200) {
                      xhr.responseType = 'blob';
                    } else {
                      xhr.responseType = 'text';
                    }
               }
            };
            return xhr;
        },
    };

    // Make request.
    try {
        let result = await $.ajax(settings);
        // Handle success
    } catch (error) {
        // Handle failure
    }
}

enter image description here

3 thoughts on “How to recreate Chrome Waterfall column (Network tab) that documents time required for different stages of network request for jQuery AJAX call?”

Leave a Comment