Skip to content

请教关于前端性能监控的问题 #31

Open
@liangxinwei

Description

@liangxinwei

你好,我在用performance api 的时候,遇到了一些问题,performance.getEntriesByType('resource') list 里面有一些数据的 responseStart/requestStart 都为 0,这样计算的话,每个请求的 TTFB
PerformanceResourceTiming.responseStart - PerformanceResourceTiming.fetchStart
的结果就不对了,还有一个就是首屏的 request_count 数据和 network 里面的 requests 有偏差,
那计算下来,接口的 ContentDownload 时间 v.responseEnd - v.responseStart 也就不对了,以下是我的计算公式(延时 15s 执行,还是有偏差):

let timingObj = Object.create(null);
const allResources = performance.getEntriesByType('resource');
timingObj.request_count = allResources.length;
// 所有的资源
timingObj.all_resources = allResources.map(v => {
    return {
      name: v.name,
      DNS: v.domainLookupEnd - v.domainLookupStart,
      TCP: v.connectEnd - v.connectStart,
      SSL: v.secureConnectionStart,
      queue: v.startTime,
      start: v.fetchStart,
      wait: v.responseStart - v.requestStart,
      receive: v.responseEnd - v.responseStart,
      duration: v.duration,
      transfer_size: v.transferSize,
      initiator_type: v.initiatorType
    };
});
// 页面相关
timingObj.time = {
    unload: time.unloadEventEnd - time.unloadEventStart,
    redirect: time.redirectEnd - time.redirectStart,
    DNS: time.domainLookupEnd - time.domainLookupStart,
    TCP: time.connectEnd - time.connectStart,
    http: time.responseEnd - time.requestStart,
    wait: time.responseStart - time.requestStart,
    dom_content_loaded: time.domInteractive - time.responseEnd,
    render: time.domComplete - time.domLoading,
    resource_download: reduceSize(performance.getEntries(), 'duration'),
    load: time.loadEventEnd - time.navigationStart,
    finish: lastResponse - firstRequest
};

想请教下:

  1. 是我的 TTFB 的计算公式不对吗?
  2. 我 request_count 数据的统计方式对吗
  3. 如果不使用 setTimeout 的话,request_count 肯定不对,因为如果接口多的话,直接在 window.addEventListener('load') 执行肯定比 network 里面的 requests 少,请问这个有没有更好的方式

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions