performance timeline
1.0.0
PerformAncetimeline規範定義了Web開發人員可以測量其Web應用程序的特定方面以使其更快的方法。它介紹了獲得以下測量結果的兩種主要方法：通過性能接口和通過性能操作器接口進行getter方法。後者是減少查詢這些測量結果的性能影響的推薦方法。
性能鍵入對象可以託管某個指標的性能數據。 afformasterry具有4個屬性： name ， entryType ， startTime和duration 。該規範不能定義具體性能鍵入對象。定義新型混凝土類型的性能對象的規格示例是油漆時機，用戶時機，資源定時和導航時間。
性能接口通過三種新方法增強，可以返回performanceEntry對象列表：
getEntries() ：返回性能對象可用的所有條目。getEntriesByType(type) ：返回到entryType匹配類型的性能對象可用的所有條目。getEntriesByName(name, type) ：返回所有可用的條目，其name匹配名稱的性能對象。如果指定了可選參數類型，則僅返回其entryType匹配類型的條目。 以下示例顯示瞭如何使用getEntriesByName()來獲取第一個油漆信息：
// Returns the FirstContentfulPaint entry, or null if it does not exist.
function getFirstContentfulPaint ( ) {
// We want the entry whose name is "first-contentful-paint" and whose entryType is "paint".
// The getter methods all return arrays of entries.
const list = performance . getEntriesByName ( "first-contentful-paint" , "paint" ) ;
// If we found the entry, then our list should actually be of length 1,
// so return the first entry in the list.
if ( list . length > 0 )
return list [ 0 ] ;
// Otherwise, the entry is not there, so return null.
else
return null ;
} performanceObserver對象可以根據其entryType值將新的性能輸入對象通知。對象的構造函數必須接收回調，每當用戶代理派遣其entryType值與觀察者觀察到的新條目相匹配的新條目時，該回調將進行。此回調不是每個performanceentry或創建performanceentry時立即運行的。取而代之的是，在PerformanceObserver上“排隊”條目，用戶代理可以稍後執行回調。執行回調後，所有排隊的條目都將傳遞到該函數上，並且performanceObserver的隊列已重置。最初，performanceObserver不會觀察到任何內容：必須調用observe()方法來指定要觀察哪種性能的對象。可以使用“ EntryTypes”數組或單個“類型”字符串來調用observe()方法，如下所述。這些模式不能混合，或者將拋出異常。
施工後，回調傳遞到PerformanceObserver上是PerformanceObserverCallback 。這是一個帶有以下參數的空白回調：
entries ： PerformanceObserverEntryList對象，其中包含在回調中派遣的條目列表。observer ：正在接收上述條目PerformanceObserver對象。hasDroppedEntries ：一個boolean指示observer目前是否正在觀察到一個entryType ，由於相應的緩衝液已滿，因此至少丟失了一個條目。請參閱“緩衝旗”部分。 supportedEntryTypes static PerformanceObserver.supportedEntryTypes返回用戶代理支持的entryType值的數組，按字母順序排序。它可用於檢測對特定類型的支持。
observe(entryTypes)在這種情況下，PerformanceObserver可以使用單個調用observe()指定各種entryTypes值。但是，在這種情況下不允許其他參數。多個observe()調用將覆蓋要觀察到的對象的種類。呼叫的示例： observer.observe({entryTypes: ['resource', 'navigation']}) 。
observe(type)在這種情況下，PerformanceObserver只能指定每個呼叫的單一類型observe()方法。在這種情況下，允許其他參數。除非對觀察者進行相同type呼叫，否則多次observe()呼叫將堆疊，在這種情況下，它將覆蓋。呼叫的示例： observer.observe({type: "mark"}) 。
buffered旗在此規範中定義了一個可以與observe(type)一起使用的參數：默認情況下的buffered標誌。設置此標誌後，用戶代理會派遣記錄其在PerformanceObserver的創建之前已經緩衝的記錄，因此在此observe()呼叫發生後，在第一個回調中收到了記錄。這使Web開發人員可以在方便的情況下註冊PerformanceObservers，而不會在頁面加載期間儘早派遣的條目。使用此標誌的調用示例： observer.observe({type: "measure", buffered: true}) 。
每個entryType都有圍繞註冊表中描述的緩衝的特殊特徵。特別是請注意，每種類型的條目數量都有限制。當entryType的緩衝區已滿時，沒有新的條目被緩衝。由於緩衝區通過其回調的hasDroppedEntry參數已滿，因此PerformanceObserver可能會查詢是否刪除了條目（未緩衝）。
disconnect()當不再應該再通知條目時，可以調用此方法。
takeRecords()此方法返回已為性能播放器排隊的條目列表，但尚未進行回調。對於性能播放器，也清空了條目的隊列。它可以與disconnect()同時使用，以確保處理所有條目，直到特定時間點。
以下示例通過使用觀察者標記和度量的性能者來記錄所有用戶定時，資源定時條目。
// Helper to log a single entry.
function logEntry ( entry => {
const objDict = {
"entry type" : , entry . entryType ,
"name" : entry . name ,
"start time" : , entry . startTime ,
"duration" : entry . duration
} ;
console . log ( objDict ) ;
} ) ;
const userTimingObserver = new PerformanceObserver ( list => {
list . getEntries ( ) . forEach ( entry => {
logEntry ( entry ) ;
} ) ;
} ) ;
// Call to log all previous and future User Timing entries.
function logUserTiming ( ) {
if ( ! PerformanceObserver . supportedEntryTypes . includes ( "mark" ) ) {
console . log ( "Marks are not observable" ) ;
} else {
userTimingObserver . observe ( { type : "mark" , buffered : true } ) ;
}
if ( ! PerformanceObserver . supportedEntryTypes . includes ( "measure" ) ) {
console . log ( "Measures are not observable" ) ;
} else {
userTimingObserver . observe ( { type : "measure" , buffered : true } ) ;
}
}
// Call to stop logging entries.
function stopLoggingUserTiming ( ) {
userTimingObserver . disconnect ( ) ;
}
// Call to force logging queued entries immediately.
function flushLog ( ) {
userTimingObserver . takeRecords ( ) . forEach ( entry => {
logEntry ( entry ) ;
} ) ;
}
