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

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

此 question 类似但没有帮助。

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

下面包含一个示例。

具体来说，我们要指出三个阶段：

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

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

解决方法

资源加载和计时

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

我找到了一篇详细的文章，描述了如何同时使用 Navigation Timing API 和 Resource Timing API 我遇到的这篇文章的标题是（找到）：

Assessing Loading Performance in Real Life with Navigation and Resource Timing

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

要毫不费力地使用它们，请为以下每个 URL 创建一个书签：

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

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

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

注意：该脚本可以被 content-security-policy 阻止，并且可能不会适用于所有网站。

源代码

您最初询问的瀑布图可以在以下链接中找到。请注意，我正在托管此文件以供您回答。我不能保证它会永远可用。请下载并托管该文件。（开放许可）

Waterfall by Andy Davies

在这里可以找到更详细的版本：（MIT 许可证）

Performance-Bookmarklet by Michael Mrowetz。

文件上传

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

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

服务器处理时间

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

我建议使用 Server-Timing 功能，并详细说明其在 PerformanceServerTiming API 中的使用

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

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

使用客户端上的信息就这么简单（来自 MDN 链接页面）：

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

为了监控上传状态，我认为你需要 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

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

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