performance timeline
1.0.0
Performancetimeline 사양은 웹 개발자가 웹 애플리케이션의 특정 측면을 측정하여 더 빠르게 만들 수있는 방법을 정의합니다. 성능 인터페이스에서 Getter 메소드를 통해 및 PerformanceObserver 인터페이스를 통해 이러한 측정을 얻는 두 가지 주요 방법을 소개합니다. 후자는 이러한 측정 쿼리의 성능 영향을 줄이는 권장 방법입니다.
PerformanceEntry 객체는 특정 메트릭의 성능 데이터를 호스팅 할 수 있습니다. PerformanceEntry에는 name , entryType , startTime 및 duration 4 가지 속성이 있습니다. 이 사양은 콘크리트 성능 대상 객체를 정의하지 않습니다. 새로운 콘크리트 유형의 PerformanceEntry 객체를 정의하는 사양의 예는 페인트 타이밍, 사용자 타이밍, 리소스 타이밍 및 탐색 타이밍입니다.
Performance 인터페이스에는 PerformanceEntry 객체의 목록을 반환 할 수있는 세 가지 새로운 방법으로 보강됩니다.
getEntries() : Performance 객체에 사용 가능한 모든 항목을 반환합니다.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 값에 따라 새로운 PerformanceEntry 객체를 알릴 수 있습니다. 객체의 생성자는 콜백을 받아야하며, 이는 사용자 에이전트가 entryType 값이 관찰자가 준수하는 것 중 하나와 일치하는 새로운 항목을 파견 할 때마다 실행됩니다. 이 콜백은 PerformanceEntry 당 또는 PerformanceEntry를 만들 때 즉시 실행되지 않습니다. 대신, 출품작은 PerformanceObserver에서 '대기'되며 사용자 에이전트는 나중에 콜백을 실행할 수 있습니다. 콜백이 실행되면 모든 대기열 항목이 함수로 전달되고 PerformanceObserver의 대기열이 재설정됩니다. PerformanceObserver는 처음에는 아무것도 관찰하지 않습니다. observe() 메소드는 어떤 종류의 PerformanceEntry 객체를 관찰 할 것인지를 지정해야합니다. observe() 메소드는 아래에 자세히 설명 된대로 'EntryTypes'배열 또는 단일 '유형'문자열로 호출 될 수 있습니다. 이러한 모드는 혼합 될 수 없거나 예외가 발생합니다.
건설시 PerformanceObserver 에 전달 된 콜백은 PerformanceObserverCallback 입니다. 다음 매개 변수가있는 무효 콜백입니다.
entries : 콜백에 발송되는 항목 목록이 포함 된 PerformanceObserverEntryList 객체.observer : 위의 항목을받는 PerformanceObserver 객체.hasDroppedEntries : observer 현재 해당 버퍼가 가득 차서 적어도 하나의 항목이 손실 된 entryType 관찰하는지 여부를 나타내는 boolean . 버퍼링 된 플래그 섹션을 참조하십시오. 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() 호출이 발생한 후 첫 번째 콜백에서 수신됩니다. 이를 통해 웹 개발자는 페이지로드 중에 일찍 발송 된 항목을 놓치지 않고 편리 할 때 PerformanceObservers를 등록 할 수 있습니다. 이 플래그를 사용하는 통화의 예 : observer.observe({type: "measure", buffered: true}) .
각 entryType 에는 레지스트리에 설명 된 버퍼링 주변의 특수 특성이 있습니다. 특히, 버퍼링 된 각 유형의 항목 수에는 한계가 있습니다. entryType 의 버퍼가 가득 차면 새 항목이 버퍼링되지 않습니다. PerformanceObserver는 콜백의 hasDroppedEntry 매개 변수를 통해 버퍼가 가득 차서 항목이 삭제되었는지 여부를 쿼리 할 수 있습니다.
disconnect()이 방법은 PerformanceObserver에 더 이상 항목을 알리지 않아야 할 때 호출 할 수 있습니다.
takeRecords() 이 메소드는 PerformanceObserver에 대해 대기되었지만 콜백이 아직 실행되지 않은 항목 목록을 반환합니다. Entries의 대기열도 PerformanceObserver를 위해 비워집니다. 특정 시점까지의 모든 항목이 처리되도록 disconnect() 와 함께 사용할 수 있습니다.
다음 예제는 관찰자가 표시 및 측정을하는 PerformanceObserver를 사용하여 모든 사용자 타이밍, 리소스 타이밍 항목을 기록합니다.
// 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 ) ;
} ) ;
}
