如何重新创建记录 jQuery AJAX 调用的不同网络请求阶段所需时间的 Chrome 瀑布列（网络选项卡）？

Question

这个类似但没有帮助。

为了向用户提供更多反馈，我们想模仿 Chrome 网络选项卡中的 Waterfall 列，它将网络请求解构为不同的阶段和时间。

示例如下。

具体而言，我们要指出三个阶段：

上传文件时间
在服务器上处理文件的时间
时间下载结果

从 jQuery AJAX docs 看来，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
    }
}

Answer 1

为了监控上传状态，我想你需要XMLHttpRequestUpload 和request.upload.addEventListener("progress", updateProgress) or request.onprogress和onloadend来检查loadend事件。参见 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/upload。
我没有看到有特定的 HTTP 状态来确定服务器响应的开始。检查 https://developer.mozilla.org/en-US/docs/Web/HTTP/Status。因此，从 HTTP API 级别 (XMLHttpRequest) 我认为您找不到任何线索。但是浏览器应该能够从 TCP 级别知道。如果您不喜欢检查 devtools，您可能需要在响应中指定时间戳。一旦客户端得到响应，客户端就知道响应的开始时间。
客户端可以很容易地得到它收到服务器响应的时间。

所以

Dur_uploading = Time_loadend - Time_requeststarts

Dur_serverprocessing = Time_responsespecified - Time_loadend

Dur_download = Time_responsereceived - Time_resonsespecified

Answer 2

资源加载和计时

像往常一样，有人有同样的想法并提供了pre-coded解决方案。我发现这些资源是为了帮助您完成这项非常复杂的任务。您可以使用编写的代码或将其放入书签。

我找到了一篇详细的文章，描述了如何使用 Navigation Timing API & the Resource Timing API 我看到的这篇文章的标题是（找到于）：

Assessing Loading Performance in Real Life with Navigation and Resource Timing

那篇文章提供的两个预建解决方案采用完全不同的方法来可视化您寻找的数据。

要轻松使用它们，请为以下每个 URL 创建一个书签：

More Detailed Analysis <-- 将此 link 复制到您的书签 collection
Performance Waterfall <-- 将此 link 复制到您的书签 collection

如前所述，这些是 bookmarklets。它们包含 JavaScript 代码，可以直接在您加载的页面上执行。要使用它们，

在 Chrome 中加载您需要性能数据的页面
打开您的书签并单击此处提供的两个小书签之一

结果将是您正在寻找的瀑布或其他详细数据。

Note: The script can be blocked by content-security-policy and may not work on all sites.

源代码

你原来问的瀑布图可以在下面link找到。请注意，我正在托管此文件以供您回答。我不能保证它永远可用。请下载并托管该文件。（开放许可证）

Waterfall by Andy Davies

更详细的版本可以在这里找到：（麻省理工学院许可证）

Performance-Bookmarklet by Michael Mrowetz.

文件上传

您将看到 Resource Timing API 提供此数据。如果您更喜欢使用 XHR API，测量文件上传时间的一种简单方法是使用 xhr.upload object，它需要一个事件侦听器来获取进度。正如所指出的，鉴于以前的工具，这不是必需的。

xhr.upload.addEventListener("progress", function(evt){
      // Initialize and finalize a timer here
      if (evt.lengthComputable) {
        console.log(evt.loaded + "/" + evt.total);
      }
    }, false);

服务器处理时间

为了实现测量服务器性能并将其报告给客户端的目标，服务器必须参与进来，以便共享您在问题中寻求的内部处理时间。无法仅通过浏览器来确定。

我推荐使用Server-Timing feature with details about its use in the PerformanceServerTiming API

使用这个 API 相当简单。如示例所示（使用 NodeJS 服务器），您的服务器所要做的就是使用包含您希望在浏览器中显示的性能数据的特定 HTTP header 进行响应：

const headers = {
    'Server-Timing': `
      cache;desc="Cache Read";dur=23.2,
      db;dur=53,
      app;dur=47.2
    `.replace(/\n/g, '')
  };

在客户端使用信息就这么简单（来自 MDN link 页面）：

let entries = performance.getEntriesByType('resource');
console.log(entries[0].serverTiming);
// 0: PerformanceServerTiming {name: "cache", duration: 23.2, description: "Cache Read"}
// 1: PerformanceServerTiming {name: "db", duration: 53, description: ""}
// 2: PerformanceServerTiming {name: "app", duration: 47.2, description: ""}

如何重新创建记录 jQuery AJAX 调用的不同网络请求阶段所需时间的 Chrome 瀑布列（网络选项卡）？

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

javascript

ajax

jquery

google-chrome

google-chrome-devtools

资源加载和计时

源代码

文件上传

服务器处理时间