国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

性能優化：Performance API

孫吉亮 / 1924人閱讀

摘要：高標準精度時間規范定義了接口，支持應用程序內的客戶端延遲測量。單位是毫秒，精確到微秒，如果因為硬件或軟件的限制，不能精確到微秒，則會顯示精確到。對象標識符，不需要唯一。該對象表示的接口的類型。該性能度量的第一個記錄時間戳的時間值。

高標準精度時間（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;
};

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 PerformanceEntryList;

name：PerformanceEntry 對象標識符，不需要唯一（unique）。

entryType：該 PerformanceEntry 對象表示的接口的類型。

startTime：該性能度量的第一個記錄時間戳的時間值。

duration：記錄時間，即記錄開始到結束的時間。

PerformanceEntry 實例會是下列接口實例之一:

PerformanceMark

PerformanceMeasure

PerformanceFrameTiming

PerformanceNavigationTiming

PerformanceResourceTiming

PerformancePaintTiming

例如在 Chrome DevTools 的控制臺打印 performance.getEntries()，

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
}

參考資料：

High Resolution Time Level 2

MDN - Performance API

Navigation Timing

Performance Timeline Level 2

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103884.html

相關文章

  • 從一次有趣的實驗學習性能優化

    摘要：從一次實驗學習性能優化之接口詳解下圖是接口的屬性提供給定頁面的與時間相關的性能信息包含了頁面瀏覽上下文的導航信息，比如大量獲取資源的重定向。返回當前網頁事件的回調函數運行結束時的毫秒時間戳。 從一次實驗學習性能優化 Web API之Performance 接口詳解 下圖是Performance 接口的屬性,提供給定頁面的與時間相關的性能信息.showImg(https://segmen...

    canger 評論0 收藏0

  • 前端性能與異常上報

    摘要：回過頭來發現，我們的項目，雖然在服務端層面做好了日志和性能統計，但在前端對異常的監控和性能的統計。對于前端的性能與異常上報的可行性探索是有必要的。這是我們頁面加載性能優化需求中主要上報的相關信息。 概述 對于后臺開發來說，記錄日志是一種非常常見的開發習慣，通常我們會使用try...catch代碼塊來主動捕獲錯誤、對于每次接口調用，也會記錄下每次接口調用的時間消耗，以便我們監控服務器接口...

    gggggggbong 評論0 收藏0

  • 使用性能API快速分析web前端性能

    摘要：性能時間線以一個統一的接口獲取由和所收集的性能數據。瀏覽器支持下表列舉了當前主流瀏覽器對性能的支持，其中標注星號的內容并非來自于性能工作小組。 頁面的性能問題一直是產品開發過程中的重要一環，很多公司也一直在使用各種方式監控產品的頁面性能。從控制臺工具、Fiddler抓包工具，到使用DOMContentLoaded和document.onreadystatechange這種侵入式java...

    mj 評論0 收藏0

  • Lighthouse的使用與Google的移動端最佳實踐

    摘要：當一個按鈕沒有名字時，屏幕閱讀器會宣布按鈕。雖然每個元素的目的對于有視覺的用戶來說可能是顯而易見的，但對于依靠屏幕閱讀器的用戶來說并非如此。屏幕閱讀器使視覺障礙的用戶能夠通過將文本內容轉換為可以使用的表格如合成語音或盲文來使用您的網站。 Lighthouse是一個Google開源的自動化工具，主要用于改進網絡應用（移動端）的質量。目前測試項包括頁面性能、PWA、可訪問性（無障礙）、最佳...

    ccj659 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<