performance timeline
1.0.0
Спецификация PerformancetImeline определяет способы, которыми веб -разработчики могут измерить конкретные аспекты своих веб -приложений, чтобы сделать их быстрее. Он вводит два основных способа получения этих измерений: с помощью методов Getter из интерфейса производительности и через интерфейс производительности. Последний является рекомендуемым способом снижения влияния на производительность запроса этих измерений.
Объект производительности может размещать данные о производительности определенной метрики. PerformanceEntry имеет 4 атрибута: name , entryType , startTime и duration . Эта спецификация не определяет конкретные объекты производительности. Примерами спецификаций, которые определяют новые конкретные типы объектов производительности, являются время рисования, время пользователя, время ресурсов и время навигации.
Интерфейс производительности дополняется тремя новыми методами, которые могут вернуть список объектов PerformanceEntry:
getEntries() : возвращает все записи, доступные для объекта производительности.getEntriesByType(type) : возвращает все записи, доступные для объекта производительности, чей тип Matches 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 может уведомлять о новых объектах PerformanceEntry, в соответствии с их значением entryType . Конструктор объекта должен получить обратный вызов, который будет выполняться всякий раз, когда пользовательский агент отправляет новые записи, значение entryType чье значение соответствует одному из тех, которые наблюдаются наблюдателем. Этот обратный вызов не выполняется ни разу, ни сразу после создания PerformanceEntry. Вместо этого записи «в очереди» в PerformanceObserver, а агент пользователя может выполнить обратный вызов позже. Когда обратный вызов выполняется, все записи в очереди передаются на функцию, а очередь для PerformanceObserver сбросится. Первоначально PerformanceObserver ничего не наблюдает: метод observe() должен быть вызван, чтобы указать, какие объекты производительности должны соблюдаться. Метод observe() может быть вызван либо с массивом «Начитывания», либо с одной строкой типа «типа», как подробно описано ниже. Эти режимы не могут быть смешаны, или будет брошено исключение.
Обратный вызов, переданный в PerformanceObserver после строительства, является PerformanceObserverCallback . Это пустой обратный вызов со следующими параметрами:
entries : объект PerformanceObserverEntryList , содержащий список записей, отправляемых в обратном вызове.observer : объект PerformanceObserver , который получает вышеуказанные записи.hasDroppedEntries : boolean указывающий, наблюдает ли observer в настоящее время наблюдает за entryType , для которого по крайней мере одна запись была потеряна из -за заполнения соответствующего буфера. Смотрите раздел «Буференный флаг». supportedEntryTypes Статический PerformanceObserver.supportedEntryTypes возвращает массив значений entryType , которые поддерживает пользовательский агент, отсортированный в алфавитном порядке. Его можно использовать для обнаружения поддержки для определенных типов.
observe(entryTypes) В этом случае PerformanceObserver может указать различные значения entryTypes с одним вызовом для observe() . Тем не менее, в этом случае не допускаются дополнительные параметры. Несколько вызовов observe() переопределят виды наблюдаемых объектов. Пример вызова: observer.observe({entryTypes: ['resource', 'navigation']}) .
observe(type) В этом случае PerformanceObserver может указать только один тип за вызов в методе observe() . Дополнительные параметры допускаются в этом случае. Несколько вызовов observe() будут складываться, если только вызов наблюдающего за наблюдателем type был сделан в прошлом, и в этом случае он будет отменен. Пример вызова: observer.observe({type: "mark"}) .
buffered флаг Один параметр, который можно использовать с помощью observe(type) определяется в этой спецификации: buffered флаг, который по умолчанию не установлен. Когда этот флаг установлен, пользовательский агент отправляет записи, которые он забуферен до создания PerformanceObserver, и, таким образом, они получены в первом обратном вызове после того, как этот вызов observe() . Это позволяет веб -разработчикам регистрировать производительность производительности, когда это удобно сделать, не пропуская записи, отправленные на ранней стадии во время загрузки страницы. Пример вызова, использующего этот флаг: observer.observe({type: "measure", buffered: true}) .
Каждый entryType имеет особые характеристики вокруг буферизации, описанных в реестре. В частности, обратите внимание, что существуют ограничения для количества записей каждого типа, которые буферируются. Когда буфер entryType становится заполненным, новые записи не забуферены. PerformanceObserver может запросить, была ли запись (не буферизована) из -за полного буфера через параметр hasDroppedEntry своего обратного вызова.
disconnect()Этот метод может быть вызван, когда PerformanceObserver больше не должен больше уведомлять о записях.
takeRecords() Этот метод возвращает список записей, которые были в очереди для PerformanceObserver, но для которых обратный вызов еще не запускался. Очередь записей также опустошен для 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 ) ;
} ) ;
}
