react perf devtool

กำลังมองหาผู้ดูแล

ตอบสนองประสิทธิภาพ devtool

devtool สำหรับการตรวจสอบประสิทธิภาพของส่วนประกอบปฏิกิริยา

สารบัญ

• การแนะนำ

• การสาธิต

  • ส่วนขยายเบราว์เซอร์
  • บันทึกมาตรการในคอนโซล

• ใช้

• ติดตั้ง

• การใช้งาน

  • ใช้ส่วนขยายเบราว์เซอร์
  • การพิมพ์มาตรการเพื่อคอนโซล

• คำอธิบาย

• ขั้นตอน

• การดำเนินการ

• การบริจาค

• ใบอนุญาต

การแนะนำ

React Performance Devtool เป็นส่วนขยายของเบราว์เซอร์สำหรับการตรวจสอบประสิทธิภาพของส่วนประกอบปฏิกิริยา มันตรวจสอบสถิติประสิทธิภาพของส่วนประกอบปฏิกิริยาตามมาตรการที่รวบรวมโดยการตอบสนองโดยใช้ window.performance API

นอกจากการขยายเบราว์เซอร์แล้วมาตรการยังสามารถตรวจสอบได้ในคอนโซล ดูส่วนการใช้งานสำหรับรายละเอียดเพิ่มเติม

โครงการนี้เริ่มต้นด้วยวัตถุประสงค์ในการขยายงานที่ทำโดย Will Chen ในข้อเสนอสำหรับตารางประสิทธิภาพการตอบสนอง คุณสามารถอ่านเพิ่มเติมได้ที่นี่

การสาธิต

ส่วนขยายเบราว์เซอร์

การสาธิตส่วนขยายที่ใช้เพื่อตรวจสอบประสิทธิภาพของส่วนประกอบปฏิกิริยาในเว็บไซต์ของฉัน

บันทึกมาตรการไปยังคอนโซล

มาตรการประสิทธิภาพสามารถบันทึกไปยังคอนโซลได้ ทุกครั้งที่มีการเรนเดอร์อีกครั้งจะมีการอัปเดตและบันทึกไปยังคอนโซล

ใช้

• ลบหรือยกเลิกการเชื่อมต่ออินสแตนซ์ส่วนประกอบที่ไม่ได้ใช้

• ตรวจสอบสิ่งที่บล็อกหรือใช้เวลามากขึ้นหลังจากเริ่มดำเนินการ

• ตรวจสอบตารางและดูว่าส่วนประกอบใดที่คุณต้องเขียน KOMPONENTUPENTUMEDATE LIFECYCLE HOOK

• ตรวจสอบว่าส่วนประกอบใดที่ใช้เวลาในการโหลดมากขึ้น

ติดตั้ง

ในการใช้ devtool นี้คุณจะต้องติดตั้งโมดูล NPM ซึ่งจะลงทะเบียนผู้ฟัง (อ่านเพิ่มเติมเกี่ยวกับสิ่งนี้ในส่วนการใช้งาน) และส่วนขยายของเบราว์เซอร์

การติดตั้งส่วนขยาย

ส่วนขยายด้านล่างแสดงถึงการเปิดตัวที่เสถียรในปัจจุบัน

• ส่วนขยายโครเมี่ยม
• ส่วนขยาย Firefox
• แอพแบบสแตนด์อโลนเร็ว ๆ นี้

การติดตั้งโมดูล NPM

 npm install react-perf-devtool

นอกจากนี้ยังมีการสร้าง umd ผ่านทาง UNPKG

 < script crossorigin src = "https://unpkg.com/[email protected]/lib/npm/hook.js" > </ script >

ส่วนขยายและแพ็คเกจนี้ยังขึ้นอยู่กับปฏิกิริยา โปรดตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งเช่นกัน

หมายเหตุ - โมดูล NPM มีความสำคัญและจำเป็นต้องใช้ Devtool ดังนั้นตรวจสอบให้แน่ใจว่าคุณติดตั้งก่อนใช้ส่วนขยายเบราว์เซอร์

การใช้งาน

ส่วนนี้ของเอกสารนี้อธิบายการใช้งานของ Devtool และ API สำหรับการลงทะเบียนผู้สังเกตการณ์ในแอพ React

ความเข้ากันได้ของเบราว์เซอร์

react-perf-devtool ขึ้นอยู่กับ window.PerformanceObserver พื้นเมือง PerformanceObserver API ที่เพิ่มเข้ามาใน Chrome V52 และ Firefox V57 สำหรับข้อมูลเพิ่มเติมดูเอกสาร Mozilla อย่างเป็นทางการที่นี่

ใช้ส่วนขยายเบราว์เซอร์

ในการใช้ส่วนขยายของ Devtool นี้คุณจะต้องลงทะเบียนผู้สังเกตการณ์ในแอพของคุณซึ่งจะสังเกตการรวบรวมข้อมูล (มาตรการประสิทธิภาพ) ตลอดเวลา

ลงทะเบียนผู้สังเกตการณ์

การลงทะเบียนผู้สังเกตการณ์นั้นง่ายมากและเป็นเพียงการโทรหาฟังก์ชั่นเดียว มาดูกันเถอะ!

 const { registerObserver } = require ( 'react-perf-devtool' )

// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( )

คุณสามารถวางรหัสนี้ไว้ในไฟล์ index.js ของคุณ (แนะนำ) หรือไฟล์อื่น ๆ ในแอพของคุณ

หมายเหตุ - สิ่งนี้ควรใช้ในโหมดการพัฒนาเมื่อคุณต้องการตรวจสอบประสิทธิภาพของส่วนประกอบปฏิกิริยา ตรวจสอบให้แน่ใจว่าได้ลบออกเมื่อสร้างการผลิต

การลงทะเบียนผู้สังเกตการณ์เชื่อมต่อวัตถุที่มีข้อมูลเกี่ยวกับ เหตุการณ์ และ การวัดประสิทธิภาพ ของส่วนประกอบปฏิกิริยาไปยังวัตถุหน้าต่างซึ่งสามารถเข้าถึงได้ภายในหน้าต่างที่ตรวจสอบโดยใช้ eval ()

ด้วยการเรนเดอร์ทุกครั้งวัตถุนี้จะได้รับการอัปเดตด้วยมาตรการใหม่และจำนวนเหตุการณ์ ส่วนขยายจะดูแลการล้างหน่วยความจำและแคช

นอกจากนี้คุณยังสามารถผ่านวัตถุ option และ callback ทางเลือกซึ่งได้รับอาร์กิวเมนต์ที่มีมาตรการแยกวิเคราะห์และรวม

ใช้การโทรกลับ

นอกจากนี้ยังสามารถส่งผ่านการโทรกลับที่เป็นตัวเลือกไปยัง registerObserver ซึ่งได้รับมาตรการแยกวิเคราะห์เป็นอาร์กิวเมนต์

คุณสามารถใช้การโทรกลับนี้เพื่อตรวจสอบมาตรการที่แยกวิเคราะห์และรวมหรือคุณสามารถรวมเข้ากับกรณีการใช้งานอื่น ๆ นอกจากนี้คุณยังสามารถใช้ประโยชน์จากมาตรการประสิทธิภาพเหล่านี้โดยใช้ Google Analytics โดยส่งมาตรการเหล่านี้ไปยัง Dashboard Analytics กระบวนการนี้มีการบันทึกไว้ที่นี่

ตัวอย่าง -

 const { registerObserver } = require ( 'react-perf-devtool' )

function callback ( measures ) {
  // do something with the measures
}

// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( { } , callback )

หลังจากที่คุณลงทะเบียนผู้สังเกตการณ์เริ่มเซิร์ฟเวอร์การพัฒนาในพื้นที่ของคุณและไปที่ http://localhost:3000/

หมายเหตุ - ส่วนขยายนี้ใช้ได้เฉพาะกับ React 16 หรือสูงกว่ารุ่นของมัน

หลังจากที่คุณติดตั้งส่วนขยายได้สำเร็จคุณจะเห็นแท็บที่เรียกว่า React Performance ในเครื่องมือนักพัฒนา Chrome

การพิมพ์มาตรการไปยังคอนโซล

มาตรการประสิทธิภาพสามารถบันทึกไปยังคอนโซลได้ อย่างไรก็ตามกระบวนการพิมพ์มาตรการไม่ได้โดยตรง คุณจะต้องตั้งค่าเซิร์ฟเวอร์ซึ่งจะฟังมาตรการ สำหรับสิ่งนี้คุณสามารถใช้ Micro โดย Zeit ซึ่งเป็น Microservice HTTP

 npm install --save micro

คุณสามารถผ่านวัตถุ ตัวเลือก เป็นอาร์กิวเมนต์ไปยัง registerObserver เพื่อเปิดใช้งานการบันทึกและตั้งค่าหมายเลขพอร์ต

ใช้วัตถุตัวเลือก

 {
  shouldLog : boolean , // default value: false
  port : number // default value: 8080
  timeout : number // default value: 2000
}

คุณสามารถส่งผ่านคุณสมบัติสามอย่างไปยังวัตถุ option shouldLog และ port

• shouldLog - ต้องใช้ค่า บูลีน หากตั้งค่าเป็นจริงมาตรการจะถูกบันทึกไปยังคอนโซล

• port - หมายเลขพอร์ตสำหรับเซิร์ฟเวอร์ที่จะส่งมาตรการ

• timeout - ค่าหมดเวลาเพื่อเลื่อนการเริ่มต้นของส่วนขยาย

หากแอปพลิเคชันของคุณใช้เวลาในการโหลดจะเป็นการดีกว่าที่จะเลื่อนการเริ่มต้นของการขยายโดยการระบุค่าการหมดเวลาผ่านคุณสมบัติ timeout สิ่งนี้ทำให้มั่นใจได้ว่าส่วนขยายจะโหลดเฉพาะหลังจากแอปพลิเคชันของคุณโหลดอย่างถูกต้องในเบราว์เซอร์เพื่อให้สามารถแสดงมาตรการที่อัปเดตได้ อย่างไรก็ตามคุณสามารถข้ามคุณสมบัตินี้ได้หากแอปพลิเคชันของคุณมีขนาดเล็ก

ตัวอย่าง

 // index.js file in your React App

const React = require ( 'react' )
const ReactDOM = require ( 'react-dom' )
const { registerObserver } = require ( 'react-perf-devtool' )

const Component = require ( './Component' ) // Some React Component

const options = {
  shouldLog : true ,
  port : 8080 ,
  timeout : 12000 // Load the extension after 12 sec.
}

function callback ( measures ) {
  // do something with the measures
}

// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback )

ReactDOM . render ( < Component /> , document . getElementById ( 'root' ) ) 

 // server.js
const { json } = require ( 'micro' )

module . exports = async req => {
  console . log ( await json ( req ) )
  return 200
} 

 // package.json

{
  "main" : "server.js" ,
  "scripts" : {
    "start-micro" : "micro -p 8080"
  }
}

สคีมาของมาตรการ

ด้านล่างคือสคีมาของมาตรการประสิทธิภาพที่บันทึกไว้ในคอนโซล

 {
  componentName , 
  mount : { // Mount time
    averageTimeSpentMs ,
    numberOfTimes ,
    totalTimeSpentMs ,
  } ,
  render : { // Render time
    averageTimeSpentMs ,
    numberOfTimes ,
    totalTimeSpentMs ,
  } ,
  update : { // Update time
    averageTimeSpentMs ,
    numberOfTimes ,
    totalTimeSpentMs ,
  } ,
  unmount : { // Unmount time
    averageTimeSpentMs ,
    numberOfTimes ,
    totalTimeSpentMs ,
  } ,
  totalTimeSpent , // Total time taken by the component combining all the phases
  percentTimeSpent , // Percent time
  numberOfInstances , // Number of instances of the component

  // Time taken in lifecycle hooks
  componentWillMount : {
    averageTimeSpentMs ,
    numberOfTimes ,
    totalTimeSpentMs ,
  }
  componentDidMount: {
    averageTimeSpentMs ,
    numberOfTimes ,
    totalTimeSpentMs ,
  }
  componentWillReceiveProps : {
    averageTimeSpentMs ,
    numberOfTimes ,
    totalTimeSpentMs ,
  } ,
  shouldComponentUpdate : {
    averageTimeSpentMs ,
    numberOfTimes ,
    totalTimeSpentMs ,
  } ,
  componentWillUpdate : {
    averageTimeSpentMs ,
    numberOfTimes ,
    totalTimeSpentMs ,
  } ,
  componentDidUpdate : {
    averageTimeSpentMs ,
    numberOfTimes ,
    totalTimeSpentMs ,
  } ,
  componentWillUnmount : {
    averageTimeSpentMs ,
    numberOfTimes ,
    totalTimeSpentMs ,
  }
}

ส่วนประกอบ

นอกจากนี้คุณยังสามารถตรวจสอบประสิทธิภาพของส่วนประกอบเฉพาะโดยใช้ตัวเลือกผ่านคุณสมบัติ components

ตัวอย่าง -

 const options = {
  shouldLog : true ,
  port : 3000 ,
  components : [ 'App' , 'Main' ] // Assuming you've these components in your project
}

function callback ( measures ) {
  // do something with measures
}

// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback ) 

คำอธิบาย

ส่วนภาพรวม

ส่วนภาพรวมแสดงถึงภาพรวมของเวลาทั้งหมด (%) ที่ใช้โดยส่วนประกอบทั้งหมดในแอปพลิเคชันของคุณ

ส่วนผลลัพธ์

• เวลาที่ใช้โดยส่วนประกอบทั้งหมด - แสดงเวลาที่ใช้โดยส่วนประกอบทั้งหมด (รวมขั้นตอนทั้งหมด)

• ระยะเวลาระยะเวลาสำหรับการเปลี่ยนแปลง - แสดงเวลาที่ใช้ในการเปลี่ยนแปลง อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ที่นี่

• ระยะเวลาระยะเวลาสำหรับการสร้างเอฟเฟกต์โฮสต์ - แสดงเวลาที่ใช้ในการสร้างเอฟเฟกต์โฮสต์เช่นการกระทำเมื่อมีการแทรกต้นไม้ใหม่ (อัปเดต) และไม่ ของเอฟเฟกต์โฮสต์ (จำนวนผลในการกระทำ)

• ระยะเวลาระยะเวลาสำหรับการโทรวิธีวงจรชีวิต - รายงานระยะเวลาของการโทรหา hooks วงจรชีวิตและไม่มีวิธีการรวมที่เรียกว่าเมื่อเบ็ดวงจรชีวิตกำหนดตารางการอัพเดต cascading

• เวลาทั้งหมด

ส่วนบนสุด

Clear - ปุ่มชัดเจนจะล้างมาตรการจากตารางและเช็ดผลลัพธ์

โหลดหน้าต่างที่ตรวจสอบใหม่ - ปุ่มนี้โหลดหน้าต่างที่ตรวจสอบใหม่และแสดงมาตรการใหม่

เหตุการณ์ที่รอดำเนินการ - สิ่งนี้บ่งชี้ถึงมาตรการที่รอดำเนินการ (ข้อมูลประสิทธิภาพการตอบสนอง)

ส่วนประกอบ

ส่วนนี้แสดงเวลาที่ใช้โดยส่วนประกอบในเฟสจำนวนอินสแตนซ์ขององค์ประกอบและเวลาทั้งหมดรวมเฟสทั้งหมดใน MS และ %

ขั้นตอน

ที่ได้รับด้านล่างนี้เป็นเฟสที่แตกต่างกันซึ่ง React วัดประสิทธิภาพ:

• React Tree การกระทบยอด - ในขั้นตอนนี้ปฏิกิริยาจะทำให้โหนดรูทและสร้างงานที่อยู่ระหว่างดำเนินการ หากมีการอัปเดตการเรียงซ้อนกันในขณะที่คืนดีกันมันจะหยุดการวัดใด ๆ ที่ใช้งานอยู่ชั่วคราวและจะกลับมาทำงานต่อในลูปรอการตัดบัญชี สิ่งนี้เกิดขึ้นเมื่อการอัปเดตระดับบนขัดจังหวะการเรนเดอร์ก่อนหน้านี้ หากข้อผิดพลาดถูกโยนลงในระหว่างขั้นตอนการเรนเดอร์จะจับข้อผิดพลาดโดยการค้นหาขอบเขตข้อผิดพลาดที่ใกล้ที่สุดหรือใช้รูทหากไม่มีขอบเขตข้อผิดพลาด

• กระทำการเปลี่ยนแปลง - ในขั้นตอนนี้งานที่เสร็จสมบูรณ์นั้นเกิดขึ้น นอกจากนี้ยังตรวจสอบว่าโหนดรูทมีผลข้างเคียงหรือไม่ หากมีเอฟเฟกต์ให้เพิ่มลงในรายการ (อ่านเพิ่มเติมโครงสร้างข้อมูลรายการนี้ที่นี่) หรือส่งผลข้างเคียงทั้งหมดในต้นไม้ หากมีการอัปเดตตามกำหนดเวลาในการกระทำปัจจุบันจะให้คำเตือนเกี่ยวกับ การอัปเดตการเรียงซ้อนใน Lifecycle Hook ในระหว่างขั้นตอนการกระทำการอัปเดตจะถูกกำหนดไว้ในการประชุมปัจจุบัน นอกจากนี้การอัปเดตจะถูกกำหนดเวลาหากเฟส/สเตจไม่ใช่ ComponentWillmount หรือ ComponentWillReceiveProps

• ส่งเอฟเฟกต์โฮสต์ - เอฟเฟกต์โฮสต์จะเกิดขึ้นเมื่อใดก็ตามที่มีการแทรกต้นไม้ใหม่ ด้วยการอัปเดตใหม่ทุกครั้งที่กำหนดไว้จะมีการคำนวณเอฟเฟกต์โฮสต์ทั้งหมด กระบวนการนี้ทำในสองขั้นตอนเฟสแรกดำเนินการแทรกโหนดโฮสต์ทั้งหมดการลบการอัปเดตและ ref unmounts และเฟสอื่น ๆ ดำเนินการตลอดวงจรชีวิตและการเรียกคืน

• ส่งมอบ Lifecycle - เมื่อการผ่านครั้งแรกเสร็จสมบูรณ์ในขณะที่กระทำผลของโฮสต์งานในความคืบหน้าของต้นไม้กลายเป็นต้นไม้ปัจจุบัน ดังนั้นการทำงานระหว่างความคืบหน้าจึงเป็นปัจจุบันระหว่าง ComponentDidMount/Update ในขั้นตอนนี้มีการใช้วงจรชีวิตและการเรียกคืนการอ้างอิงทั้งหมด การกระทำของชีวิตที่เกิดขึ้นเป็นผ่านแยกต่างหากเพื่อให้ทุกตำแหน่งการอัปเดตและการลบในต้นไม้ทั้งหมดถูกเรียกใช้แล้ว

การดำเนินการ

ในเวอร์ชันก่อนหน้าของ devtool นี้ตัวชี้วัดประสิทธิภาพกำลังถูกสอบถามแทนที่จะฟังประเภทเหตุการณ์ สิ่งนี้จำเป็นต้องแสดงความคิดเห็นบรรทัดภายในแพ็คเกจ react-dom ( react-dom.development.js ) เพื่อให้เครื่องมือนี้สามารถจับตัวชี้วัดเหล่านี้ได้

การแลกเปลี่ยน

• จำเป็นต้องอัปเดตชุดการพัฒนา CommonJS React-Dom (แสดงความคิดเห็นบรรทัด)
• ไม่มีทางส่งมาตรการจากเฟรมแอพไปยังคอนโซล
• จำเป็นต้องสอบถามมาตรการแทนที่จะฟังเหตุการณ์หนึ่งครั้ง
• ไม่มีการควบคุมวิธีการตรวจสอบมาตรการสำหรับกรณีการใช้งานเฉพาะ (สำหรับ EG - บันทึกเฉพาะประสิทธิภาพการเรนเดอร์และอัปเดตของส่วนประกอบ)

แต่ตอนนี้ด้วยความช่วยเหลือของ Performance Observer API ผู้สังเกตการณ์สามารถลงทะเบียนเพื่อฟังเหตุการณ์ประเภทใดประเภทหนึ่งและรับรายการ (มาตรการประสิทธิภาพ) react-perf-devtool ให้ API ที่ด้านบนของผู้สังเกตการณ์ประสิทธิภาพซึ่งเป็นฟังก์ชั่นที่ลงทะเบียนผู้สังเกตการณ์

 const { registerObserver } = require ( 'react-perf-devtool' )

// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( )

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

ด้วยการเรนเดอร์ทุกครั้งวัตถุนี้จะได้รับการอัปเดตด้วยมาตรการใหม่และจำนวนเหตุการณ์ ส่วนขยายจะดูแลการล้างหน่วยความจำและแคช

วัตถุ option และ callback ทางเลือกสามารถส่งผ่านไปยัง registerObserver วัตถุ option มีประโยชน์เมื่อการวัดประสิทธิภาพจะถูกบันทึกไปยังคอนโซล callback ได้รับผลลัพธ์ที่แยกวิเคราะห์และรวม (ตัวชี้วัด) เป็นอาร์กิวเมนต์ซึ่งสามารถใช้สำหรับการวิเคราะห์

ประโยชน์

การคำนวณและรวมผลลัพธ์ที่เกิดขึ้นภายในเฟรมแอพและไม่ได้อยู่ใน Devtool มันมีประโยชน์ของตัวเอง

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

todos / ความคิด / การปรับปรุง

• ใหม่ UI สำหรับ devtool
• ทำให้การใช้งานเครื่องกำเนิดไฟฟ้ามีคอนกรีตมากขึ้น
• เพิ่มการสนับสนุนสำหรับ React รุ่นเก่า
• ทำให้เครื่องมือเข้าใจได้มากขึ้น

การบริจาค

อ่านคู่มือการสนับสนุน

ใบอนุญาต

มิกซ์