如何基于jQuery AJAX复刻Chrome Network面板的文件请求三阶段瀑布计时

有一个相似问题的场景与需求高度重合，但未提供有效解决方案。

为了向用户提供更直观的操作反馈，我们希望复刻Chrome浏览器开发者工具Network标签页中的Waterfall（瀑布图）列功能，该功能可将网络请求拆解为多个执行阶段并分别统计各阶段的耗时。

效果示例如下：

我们重点需要统计以下三个核心阶段的耗时：

• 文件上传阶段耗时
• 服务端文件处理阶段耗时
• 响应结果下载阶段耗时

查阅jQuery AJAX官方文档后，我们发现beforeSend钩子似乎可用于统计文件上传的耗时，但尚未明确如何统计响应下载耗时与服务端处理耗时（即截图中的TTFB指标）。

我们当前的AJAX调用实现代码如下：

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
    }
}

请问该如何实现上述三个阶段的准确耗时统计，完成Chrome Network风格的请求瀑布图复刻呢？

内容的提问来源于stack exchange，提问作者Crashalot