性能優化：Performance API
高標準精度時間（High Resolution Time）規範定義了
Performance接口，支持應用程序（applications）內的客戶端延遲測量。
Date 對象表示自1970-01-01起的毫秒精度時間。在實踐中，會受制於時鐘偏移（clock skew）和系統時鐘調整（adjustment of the system clock），因此時間值可能不能保證一直是在增長的，例如：css
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 屬性。html
DOMHighResTimeStamp
單位是毫秒，精確到5微秒（0.005 ms），若是由於硬件或軟件的限制， User Agent 不能精確到微秒，則會顯示精確到1ms。html5
typedef double DOMHighResTimeStamp;
Time Origin
計算時間的起始點，瀏覽器
The time origin is the time value from which time is measured:網絡
If the global object is a
Windowobject, the time origin MUST be equal to:app
- 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
WorkerGlobalScopeobject, the time origin MUST be equal to the official moment of creation of the worker.- Otherwise, the time origin is undefined.
在 Chrome DevTools 控制檯打印 performance:dom
{
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.domContentLoadedEventStartfetch
- 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()，
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. 性能優化篇 - Performance（工具 & api）
- 2. TensorFlow 性能優化之 Performance Guide
- 3. Fixing Performance Problems - 2019.3 (性能優化——Unity 2019.3)
- 4. web性能優化監控分析神器【Web Performance Timing API】
- 5. rsync性能終極優化【Optimize rsync performance】
- 6. 前端性能優化之Performance神器
- 7. 網站性能優化（website performance optimization）
- 8. javascript性能優化二 之Performance
- 9. 前端性能優化《一》——Chrome Performance 頁面性能調試
- 10. 利用Performance API分析網站性能
- 更多相關文章...
- • SEO - 搜索引擎優化 - 網站建設指南
- • MySQL的優勢（優點） - MySQL教程
- • JDK13 GA發佈：5大特性解讀
- • 算法總結-廣度優先算法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 性能優化篇 - Performance（工具 & api）
- 2. TensorFlow 性能優化之 Performance Guide
- 3. Fixing Performance Problems - 2019.3 (性能優化——Unity 2019.3)
- 4. web性能優化監控分析神器【Web Performance Timing API】
- 5. rsync性能終極優化【Optimize rsync performance】
- 6. 前端性能優化之Performance神器
- 7. 網站性能優化（website performance optimization）
- 8. javascript性能優化二 之Performance
- 9. 前端性能優化《一》——Chrome Performance 頁面性能調試
- 10. 利用Performance API分析網站性能