机能优化：Performance API

2019年9月1日 176次阅读 来源: Jane_Shen

高标准精度时候（High Resolution Time）范例定义了
Performance接口，支撑运用程序（applications）内的客户端耽误丈量。

Date 对象示意自1970-01-01起的毫秒精度时候。在实践中，会受制于时钟偏移（clock skew）和体系时钟调解（adjustment of the system clock），所以时候值能够不能保证一直是在增添的，比方：

var mark_start = Date.now();
doTask(); // Some task
var duration = Date.now() - mark_start;

duration 能够 >0，<0，=0。
对一些须要盘算网页加载时候、剧本执行时候、动画时候或是须要更高准确度等状况就不太够了。
为了保证单调增进（monotonically increasing）且更高准确度的时候值，Performace 接口定义了 DOMHighResTimeStamp 范例，performance.now 要领，performance.timeOrigin 属性。

DOMHighResTimeStamp

单元是毫秒，准确到5微秒（0.005 ms），假如由于硬件或软件的限定， User Agent 不能准确到微秒，则会显现准确到1ms。

typedef double DOMHighResTimeStamp;

Time Origin

盘算时候的起始点，

The time origin is the time value from which time is measured:

  • If the global object is a Window object, the time origin MUST be equal to:

    • the time when the browsing context(阅读上下文) is first created if there is no previous document;（注：在一个 Web 阅读器内，一个标签页或窗口常包括一个阅读上下文，如一个 iframe 或一个 frameset 内的多少 frame。）
    • otherwise, the time of the user confirming the navigation during the previous document’s prompt to unload algorithm, if a previous document exists and if the confirmation dialog was displayed;
    • otherwise, the time of starting the navigation responsible for loading the Window object’s newest Document object.
  • If the global object is a WorkerGlobalScope object, the time origin MUST be equal to the official moment of creation of the worker.
  • Otherwise, the time origin is undefined.

在 Chrome DevTools 控制台打印 performance:

{
    navigation: {type: 0, redirectCount: 0}
    timeOrigin: 1555386564177.783
    timing: {
        connectEnd: 1555386564181
        connectStart: 1555386564181
        domComplete: 1555386564345
        domContentLoadedEventEnd: 1555386564322
        domContentLoadedEventStart: 1555386564318
        domInteractive: 1555386564317
        domLoading: 1555386564286
        domainLookupEnd: 1555386564181
        domainLookupStart: 1555386564181
        fetchStart: 1555386564181
        loadEventEnd: 1555386564345
        loadEventStart: 1555386564345
        navigationStart: 1555386564177
        redirectEnd: 0
        redirectStart: 0
        requestStart: 1555386564181
        responseEnd: 1555386564291
        responseStart: 1555386564181
        secureConnectionStart: 0
        unloadEventEnd: 0
        unloadEventStart: 0
    }
}

Performance 接口

[Exposed=(Window,Worker)]
interface Performance : EventTarget {
    clearMarks: ƒ clearMarks()
    clearMeasures: ƒ clearMeasures()
    void clearResourceTimings();
    PerformanceEntryList getEntries();
    PerformanceEntryList getEntriesByType(DOMString type);
    PerformanceEntryList getEntriesByName(DOMString name, optional DOMString type);
    mark: ƒ mark()
    measure: ƒ measure()
    memory: (...)
    readonly attribute PerformanceNavigation navigation;
    DOMHighResTimeStamp now();
    attribute EventHandler onresourcetimingbufferfull;
    void setResourceTimingBufferSize(unsigned long maxSize);
    readonly attribute DOMHighResTimeStamp  timeOrigin;
    readonly attribute PerformanceTiming timing;
    [Default] object toJSON();
};

performance 属性

partial interface WindowOrWorkerGlobalScope {
    [Replaceable]
    readonly attribute Performance performance;
};

比方 window.performance，

interface Performance {
  readonly attribute PerformanceTiming timing;
  readonly attribute PerformanceNavigation navigation;
};

partial interface Window {
  [Replaceable] readonly attribute Performance performance;
};

PerformanceTiming 接口

interface PerformanceTiming {
  readonly attribute unsigned long long navigationStart;
  readonly attribute unsigned long long unloadEventStart;
  readonly attribute unsigned long long unloadEventEnd;
  readonly attribute unsigned long long redirectStart;
  readonly attribute unsigned long long redirectEnd;
  readonly attribute unsigned long long fetchStart;
  readonly attribute unsigned long long domainLookupStart;
  readonly attribute unsigned long long domainLookupEnd;
  readonly attribute unsigned long long connectStart;
  readonly attribute unsigned long long connectEnd;
  readonly attribute unsigned long long secureConnectionStart;
  readonly attribute unsigned long long requestStart;
  readonly attribute unsigned long long responseStart;
  readonly attribute unsigned long long responseEnd;
  readonly attribute unsigned long long domLoading;
  readonly attribute unsigned long long domInteractive;
  readonly attribute unsigned long long domContentLoadedEventStart;
  readonly attribute unsigned long long domContentLoadedEventEnd;
  readonly attribute unsigned long long domComplete;
  readonly attribute unsigned long long loadEventStart;
  readonly attribute unsigned long long loadEventEnd;
};

《机能优化：Performance API》

  • DNS剖析：timing.domainLookupEnd – timing.domainLookupStart
  • 竖立衔接：timing.connectEnd – timing.connectStart
  • 发送要求：timing.responseStart – timing.requestStart
  • 吸收要求：timing.responseEnd – timing.responseStart
  • 剖析DOM树：timing.domInteractive – timing.domLoading
  • 页面加载完成：timing.domContentLoadedEventStart – timing.domInteractive
  • DOMContentLoaded事宜耗时：

timing.domContentLoadedEventEnd – timing.domContentLoadedEventStart

  • DOM加载完成：timing.domComplete – timing.domContentLoadedEventEnd
  • DOMLoad事宜耗时：timing.loadEventEnd – timing.loadEventStart

PerformanceNavigation 接口

interface PerformanceNavigation {
  const unsigned short TYPE_NAVIGATE = 0;
  const unsigned short TYPE_RELOAD = 1;
  const unsigned short TYPE_BACK_FORWARD = 2;
  const unsigned short TYPE_RESERVED = 255;
  readonly attribute unsigned short type;
  readonly attribute unsigned short redirectCount;
};
  • TYPE_NAVIGATE (0)
    经由过程点击链接、书签、表单提交、剧本、阅读器地点栏输入地点接见
    The page was accessed by following a link, a bookmark, a form submission, or a script, or by typing the URL in the address bar.
  • TYPE_RELOAD (1)
    经由过程点击革新按钮或是Location.reload()接见
    The page was accessed by clicking the Reload button or via the Location.reload() method.
  • TYPE_BACK_FORWARD (2)
    经由过程页面行进退却接见
    The page was accessed by navigating into the history.
  • TYPE_RESERVED (255)
    其他体式格局
    Any other way.

PerformanceEntry 接口

PerformanceEntry 对象封装了作为机能时候线（performance timeline）一部分的单个机能指标。

[Exposed=(Window,Worker)]
interface PerformanceEntry {
  readonly    attribute DOMString           name;
  readonly    attribute DOMString           entryType;
  readonly    attribute DOMHighResTimeStamp startTime;
  readonly    attribute DOMHighResTimeStamp duration;
  [Default] object toJSON();
};
partial interface Performance {
  PerformanceEntryList getEntries ();
  PerformanceEntryList getEntriesByType (DOMString type);
  PerformanceEntryList getEntriesByName (DOMString name, optional DOMString type);
};
typedef sequence<PerformanceEntry> PerformanceEntryList;
  • name：PerformanceEntry 对象标识符，不须要唯一（unique）。
  • entryType：该 PerformanceEntry 对象示意的接口的范例。
  • startTime：该机能器量的第一个纪录时候戳的时候值。
  • duration：纪录时候，即纪录最先到完毕的时候。

PerformanceEntry 实例会是以下接口实例之一:

  • PerformanceMark
  • PerformanceMeasure
  • PerformanceFrameTiming
  • PerformanceNavigationTiming
  • PerformanceResourceTiming
  • PerformancePaintTiming

比方在 Chrome DevTools 的控制台打印 performance.getEntries()，
《机能优化：Performance API》

PerformanceNavigationTiming

[Exposed=Window]
interface PerformanceNavigationTiming : PerformanceResourceTiming {
    readonly        attribute DOMHighResTimeStamp unloadEventStart;
    readonly        attribute DOMHighResTimeStamp unloadEventEnd;
    readonly        attribute DOMHighResTimeStamp domInteractive;
    readonly        attribute DOMHighResTimeStamp domContentLoadedEventStart;
    readonly        attribute DOMHighResTimeStamp domContentLoadedEventEnd;
    readonly        attribute DOMHighResTimeStamp domComplete;
    readonly        attribute DOMHighResTimeStamp loadEventStart;
    readonly        attribute DOMHighResTimeStamp loadEventEnd;
    readonly        attribute NavigationType      type;
    readonly        attribute unsigned short      redirectCount;
    [Default] object toJSON();
};
{
  connectEnd: 3.8349999995261896
  connectStart: 3.8349999995261896
  decodedBodySize: 74229
  domComplete: 336.69000000008964
  domContentLoadedEventEnd: 130.1899999998568
  domContentLoadedEventStart: 129.47499999791034
  domInteractive: 129.42000000111875
  domainLookupEnd: 3.8349999995261896
  domainLookupStart: 3.8349999995261896
  duration: 339.76500000062515
  encodedBodySize: 18430
  entryType: "navigation"
  fetchStart: 3.8349999995261896
  initiatorType: "navigation"
  loadEventEnd: 339.76500000062515
  loadEventStart: 336.72999999907915
  name: "https://developer.mozilla.org/en-US/docs/Web/API/Performance_API"
  nextHopProtocol: "h2"
  redirectCount: 0
  redirectEnd: 0
  redirectStart: 0
  requestStart: 5.089999998745043
  responseEnd: 15.745000000606524
  responseStart: 5.395000000135042
  secureConnectionStart: 0
  serverTiming: []
  startTime: 0
  transferSize: 0
  type: "back_forward"
  unloadEventEnd: 16.714999997930136
  unloadEventStart: 16.709999999875436
  workerStart: 0
}

PerformanceResourceTiming

检索和剖析收集加载运用资本（比方 link/script/iframe标签、css中url()等）的细致收集计时数据。

[Exposed=(Window)]
interface PerformanceResourceTiming : PerformanceEntry {
    readonly attribute DOMString           initiatorType;
    readonly attribute DOMHighResTimeStamp redirectStart;
    readonly attribute DOMHighResTimeStamp redirectEnd;
    readonly attribute DOMHighResTimeStamp fetchStart;
    readonly attribute DOMHighResTimeStamp domainLookupStart;
    readonly attribute DOMHighResTimeStamp domainLookupEnd;
    readonly attribute DOMHighResTimeStamp connectStart;
    readonly attribute DOMHighResTimeStamp connectEnd;
    readonly attribute DOMHighResTimeStamp secureConnectionStart;
    readonly attribute DOMHighResTimeStamp requestStart;
    readonly attribute DOMHighResTimeStamp responseStart;
    readonly attribute DOMHighResTimeStamp responseEnd;
    serializer = {inherit, attribute};
};
{
  connectEnd: 403.1199999990349
  connectStart: 403.1199999990349
  decodedBodySize: 33808
  domainLookupEnd: 403.1199999990349
  domainLookupStart: 403.1199999990349
  duration: 1.6250000007858034
  encodedBodySize: 33808
  entryType: "resource"
  fetchStart: 403.1199999990349
  initiatorType: "link"
  name: "https://developer.mozilla.org/static/fonts/locales/ZillaSlab-Regular.subset.bbc33fb47cf6.woff2"
  nextHopProtocol: "h2"
  redirectEnd: 0
  redirectStart: 0
  requestStart: 404.0950000016892
  responseEnd: 404.7449999998207
  responseStart: 404.3100000017148
  secureConnectionStart: 0
  serverTiming: []
  startTime: 403.1199999990349
  transferSize: 0
  workerStart: 0
}

PerformancePaintTiming

网页构建时期有关“绘制(paint)”（也称为“衬着(render)”）操纵的计时信息。 “绘制(paint)”是指将衬着树转换为屏幕上的像素。

interface PerformancePaintTiming : PerformanceEntry {};
{
  duration: 0
  entryType: "paint"
  name: "first-paint"
  startTime: 667.9050000020652
}

参考资料：

  1. High Resolution Time Level 2
  2. MDN – Performance API
  3. Navigation Timing
  4. Performance Timeline Level 2
    原文作者：Jane_Shen
    原文地址: https://segmentfault.com/a/1190000018998798
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞