PerformanceResourceTiming：connectEnd 属性

基线 广泛可用

此功能非常成熟，适用于多种设备和浏览器版本。自 2017 年 9 月.

报告反馈

值

connectEnd 只读属性返回浏览器完成与服务器建立连接以检索资源后的时间戳。时间戳值包括建立传输连接的时间间隔，以及其他时间间隔，例如 TLS 握手和SOCKS 身份验证。

  • connectEnd 属性可以具有以下值
  • 表示建立连接后时间的DOMHighResTimeStamp。
  • 如果资源是立即从缓存中检索的，则为0。

示例

如果资源是跨域请求，并且未使用Timing-Allow-Origin HTTP 响应头，则为0。

测量 TCP 握手时间

connectEnd 和connectStart 属性可用于测量 TCP 握手需要多长时间。
const tcp = entry.connectEnd - entry.connectStart;

js

connectEnd 和connectStart 属性可用于测量 TCP 握手需要多长时间。
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const tcp = entry.connectEnd - entry.connectStart;
    if (tcp > 0) {
      console.log(`${entry.name}: TCP handshake duration: ${tcp}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });

示例使用PerformanceObserver，该对象在浏览器性能时间轴中记录新的resource 性能条目时发出通知。使用buffered 选项访问观察器创建之前的条目。

connectEnd 和connectStart 属性可用于测量 TCP 握手需要多长时间。
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const tcp = entry.connectEnd - entry.connectStart;
  if (tcp > 0) {
    console.log(`${entry.name}: TCP handshake duration: ${tcp}ms`);
  }
});

示例使用Performance.getEntriesByType()，该方法仅显示在调用此方法时浏览器性能时间轴中存在的resource 性能条目

跨域时序信息

如果connectEnd 属性的值为0，则该资源可能是跨域请求。要查看跨域时序信息，需要设置Timing-Allow-Origin HTTP 响应头。

例如，要允许https://mdn.org.cn 查看时序资源，跨域资源应发送
Timing-Allow-Origin: https://mdn.org.cn

规范

http
规范
# Resource Timing

浏览器兼容性

dom-performanceresourcetiming-connectend

另请参阅