performance timeline

ไทม์ไลน์ประสิทธิภาพ

ภาพรวม

ข้อกำหนด PerformanCetimeline กำหนดวิธีการที่นักพัฒนาเว็บสามารถวัดแง่มุมเฉพาะของเว็บแอปพลิเคชันของพวกเขาเพื่อให้เร็วขึ้น มันแนะนำสองวิธีหลักในการรับการวัดเหล่านี้: ผ่านวิธีการ getter จากอินเทอร์เฟซประสิทธิภาพและผ่านอินเตอร์เฟส PerformanceObserver หลังเป็นวิธีที่แนะนำในการลดผลกระทบด้านประสิทธิภาพของการสืบค้นการวัดเหล่านี้

PerformanceEntry

วัตถุ PerformanceEntry สามารถโฮสต์ข้อมูลประสิทธิภาพของตัวชี้วัดที่แน่นอน PerformanceEntry มี 4 แอตทริบิวต์: name , entryType , startTime และ duration ข้อกำหนดนี้ไม่ได้กำหนดวัตถุที่มีประสิทธิภาพคอนกรีต ตัวอย่างของข้อมูลจำเพาะที่กำหนดรูปแบบคอนกรีตประเภทใหม่ของวัตถุที่มีประสิทธิภาพคือการกำหนดเวลาสีเวลาของผู้ใช้เวลาของทรัพยากรและเวลาการนำทาง

ประสิทธิภาพการทำงาน

อินเทอร์เฟซประสิทธิภาพได้รับการเสริมด้วยวิธีการใหม่สามวิธีที่สามารถส่งคืนรายการวัตถุประสิทธิภาพการทำงาน:

• getEntries() : ส่งคืนรายการทั้งหมดที่มีให้กับวัตถุประสิทธิภาพ
• getEntriesByType(type) : ส่งคืนรายการทั้งหมดที่มีให้ไปยังวัตถุประสิทธิภาพที่มี ประเภท entryType จับคู่รายการ
• getEntriesByName(name, type) : ส่งคืนรายการทั้งหมดที่มีให้ไปยังวัตถุประสิทธิภาพที่มี name ตรง ชื่อ หากระบุ ประเภท พารามิเตอร์เสริมจะส่งกลับรายการที่มี การ จับ entryType ที่ตรงกันเท่านั้น

ใช้ getters ใน JavaScript

ตัวอย่างต่อไปนี้แสดงให้เห็นว่าสามารถใช้ 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

วัตถุ PerformanceObserver สามารถแจ้งให้ทราบถึงวัตถุที่มีประสิทธิภาพใหม่ตามค่า entryType ของพวกเขา ตัวสร้างของวัตถุจะต้องได้รับการโทรกลับซึ่งจะดำเนินการเมื่อใดก็ตามที่ตัวแทนผู้ใช้กำลังส่งรายการใหม่ที่มีค่า entryType ตรงกับหนึ่งในสิ่งที่ถูกสังเกตโดยผู้สังเกตการณ์ การโทรกลับนี้ไม่ได้ทำงานครั้งเดียวต่อการแสดงหรือทันทีเมื่อสร้างการแสดงที่มีประสิทธิภาพ แต่รายการจะถูก 'คิว' ที่ PerformanceObserver และตัวแทนผู้ใช้สามารถเรียกใช้การโทรกลับในภายหลัง เมื่อมีการเรียกใช้การโทรกลับรายการที่คิวทั้งหมดจะถูกส่งผ่านไปยังฟังก์ชั่นและคิวสำหรับ PerformanceObserver จะถูกรีเซ็ต PerformanceObserver ในขั้นต้นไม่ได้สังเกตอะไรเลย: วิธี observe() จะต้องเรียกใช้เพื่อระบุว่าจะสังเกตวัตถุประเภทใดที่จะสังเกตได้ วิธี observe() สามารถเรียกได้ด้วยอาร์เรย์ 'entryTypes' หรือด้วยสตริง 'type' เดียวตามรายละเอียดด้านล่าง โหมดเหล่านั้นไม่สามารถผสมได้หรือข้อยกเว้นจะถูกโยนทิ้ง

PerformanceObservercallback

การโทรกลับไปยัง PerformanceObserver เมื่อการก่อสร้างเป็น PerformanceObserverCallback มันเป็นโมฆะโทรกลับพร้อมพารามิเตอร์ต่อไปนี้:

• entries : วัตถุ PerformanceObserverEntryList ที่มีรายการของรายการที่ถูกส่งในการโทรกลับ
• observer : วัตถุ PerformanceObserver ที่ได้รับรายการข้างต้น
• hasDroppedEntries : boolean ที่ระบุว่า observer กำลังสังเกตการ entryType ซึ่งอย่างน้อยหนึ่งรายการได้หายไปเนื่องจากบัฟเฟอร์ที่สอดคล้องกันเต็มหรือไม่ ดูส่วนธงบัฟเฟอร์

supportedEntryTypes

Performance 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() นี้เกิดขึ้น สิ่งนี้ช่วยให้นักพัฒนาเว็บสามารถลงทะเบียน PerformanceObservers เมื่อสะดวกในการทำเช่นนั้นโดยไม่พลาดรายการที่ส่งมาก่อนในระหว่างการโหลดหน้าเว็บ ตัวอย่างการโทรโดยใช้ธงนี้: observer.observe({type: "measure", buffered: true})

แต่ละ entryType มีลักษณะพิเศษเกี่ยวกับการบัฟเฟอร์ที่อธิบายไว้ในรีจิสทรี โดยเฉพาะอย่างยิ่งโปรดทราบว่ามีข้อ จำกัด สำหรับจำนวนรายการของแต่ละประเภทที่บัฟเฟอร์ เมื่อบัฟเฟอร์ของ entryType เต็มจะไม่มีรายการใหม่จะถูกบัฟเฟอร์ PerformanceObserver อาจสอบถามได้ว่ารายการถูกทิ้ง (ไม่บัฟเฟอร์) เนื่องจากบัฟเฟอร์เต็มผ่านพารามิเตอร์ hasDroppedEntry ของการโทรกลับ

disconnect()

วิธีนี้สามารถเรียกได้เมื่อ PerformanceObserver ไม่ควรได้รับแจ้งรายการอีกต่อไป

takeRecords()

วิธีนี้ส่งคืนรายการรายการที่ได้รับการจัดคิวสำหรับ PerformanceObserver แต่การโทรกลับยังไม่ทำงาน คิวของรายการจะถูกทำให้ว่างเปล่าสำหรับ performanceobserver มันสามารถใช้ควบคู่กับ disconnect() เพื่อให้แน่ใจว่ารายการทั้งหมดถึงจุดเฉพาะในเวลาจะถูกประมวลผล

การใช้ PerformanceObserver

ตัวอย่างต่อไปนี้บันทึกเวลาของผู้ใช้ทั้งหมดรายการเวลาทรัพยากรโดยใช้ 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 ) ;
  } ) ;
}