ลาก่อน JS Profiler ทำโปรไฟล์ CPU ด้วยแผงประสิทธิภาพ

แผง JavaScript Profiler จะหยุดให้บริการใน Chrome 124 นับจากนี้ไป ให้ใช้แผงประสิทธิภาพเพื่อระบุประสิทธิภาพของ CPU ของ Node.js

เหตุใดเราจึงเลิกใช้งานเครื่องมือสร้างโปรไฟล์ JavaScript (เครื่องมือสร้างโปรไฟล์ JS)

ทีมเครื่องมือสำหรับนักพัฒนาเว็บวางแผนจะเลิกใช้งานเครื่องมือสร้างโปรไฟล์ JS ในที่สุดตั้งแต่ Chrome 58 เป็นต้นไป ซึ่งมีสาเหตุหลายประการดังนี้

  • ไม่มีการพัฒนาอย่างต่อเนื่องอีกต่อไป เครื่องมือสร้างโปรไฟล์ JS ไม่ได้รับการอัปเดตที่สำคัญเป็นเวลาหลายปี และทีมงานไม่มีทรัพยากรที่จะพัฒนาเครื่องมือนี้ต่อไป
  • ประสบการณ์การทำโปรไฟล์ที่มีประสิทธิภาพยิ่งขึ้น แผงประสิทธิภาพนี้ใช้อยู่แล้วสำหรับการวิเคราะห์ประสิทธิภาพทุกประเภท และด้วยความสามารถในการโปรไฟล์ประสิทธิภาพของ CPU ของ JavaScript ใน Node.js คุณจึงควรรวมทุกอย่างไว้ในที่เดียวเพื่อความสอดคล้องและประสิทธิภาพ
  • แผงประสิทธิภาพจะดียิ่งขึ้น เรายังคงปรับปรุงฟีเจอร์นี้อย่างต่อเนื่องด้วยการเพิ่มฟีเจอร์และการปรับปรุงใหม่ๆ ทำให้เครื่องมือนี้เป็นเครื่องมือที่มีประสิทธิภาพและใช้งานง่ายยิ่งขึ้นสำหรับการวิเคราะห์ประสิทธิภาพ

คุณควรทำอย่างไรหลังจากเลิกใช้งาน

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีสร้างโปรไฟล์ประสิทธิภาพของ CPU ของ JavaScript ได้ที่ประสิทธิภาพ Node.js ของโปรไฟล์

เคล็ดลับบางประการในการใช้แผงประสิทธิภาพมีดังนี้

  • ใช้แผนภูมิเปลวไฟเพื่อระบุจุดคอขวดด้านประสิทธิภาพ

แผนภูมิเปลวไฟ

  • ใช้แท็บล่างขึ้นบนและโครงสร้างการเรียกเพื่อทำความเข้าใจความสัมพันธ์ระหว่างฟังก์ชันต่างๆ

แท็บด้านล่างขึ้น

แท็บโครงสร้างการโทร

เราจะรับมือกับการเลิกใช้งานได้อย่างไร

เราได้พัฒนาต้นแบบและเผยแพร่คำขอความคิดเห็น (RFC) แบบสาธารณะบน GitHub เพื่อขอความคิดเห็นจากนักพัฒนาซอฟต์แวร์

นอกจากนี้ เรายังติดต่อผู้เชี่ยวชาญด้านนักพัฒนาซอฟต์แวร์อย่างเต็มที่เพื่อทดสอบต้นแบบ โดยแก้ไขข้อกังวลหรือปัญหาต่างๆ เพื่อให้มั่นใจว่าแผงประสิทธิภาพเป็นไปตามความต้องการหลักในการทำโปรไฟล์

เรากำลังทยอยเลิกใช้เครื่องมือสร้างโปรไฟล์ JS 4 ขั้นตอน เพื่อให้นักพัฒนาซอฟต์แวร์มีเวลามากพอในการปรับเปลี่ยนและปรับใช้

ปัญหาหลักและวิธีแก้ไข

ในบรรดาความคิดเห็นที่เราได้รับ ข้อกังวลที่เร่งด่วนที่สุดอยู่ที่ประเด็นหลัก 3 ประการ ได้แก่

  • รองรับรูปแบบไฟล์ .cpuprofile เครื่องมือสร้างโปรไฟล์ JS ใช้รูปแบบไฟล์อื่น ซึ่งแผงประสิทธิภาพจะรองรับได้
  • โหลดช้า ดูเหมือนว่าความเร็วในการโหลดของแผงจะช้า ซึ่งรบกวนกระบวนการทำโปรไฟล์
  • ไม่มีตัวเลือก VM ของ JavaScript การไม่มีความสามารถในการทำโปรไฟล์ของตัวเลือกอินสแตนซ์ JavaScript VM ในบางสถานการณ์

ลองมาดูแต่ละปัญหาเหล่านี้และดูว่าเราแก้ไขปัญหาเหล่านั้นอย่างไร

โหลดช้า

นักพัฒนาแอปบอกเราว่าแผงประสิทธิภาพใช้เวลาโหลดไฟล์ข้อมูลขนาดใหญ่นานเกินไปและบางครั้งอาจขัดข้อง

เราใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อวิเคราะห์เครื่องมือสำหรับนักพัฒนาเว็บ (เราเรียกว่า "เครื่องมือสำหรับนักพัฒนาเว็บ") เราพบปัญหาและทำการเพิ่มประสิทธิภาพหลายประการ:

  • แทนที่ Set ด้วยโครงสร้างข้อมูล Array แล้ว
  • นำโครงสร้างข้อมูล Map ที่ไม่จำเป็นออกแล้ว
  • เปลี่ยนโครงสร้างภายในฟังก์ชันที่เกิดซ้ำเป็นวนซ้ำ (สำหรับการวนซ้ำ) เพื่อลดการใช้งานสแต็กหน่วยความจำ

การแก้ไขจุดคอขวดเหล่านี้ทำให้เราโหลดไฟล์ขนาดใหญ่ได้เร็วขึ้น 80% 🎉

อ่านเพิ่มเติมเกี่ยวกับสิ่งที่เราได้เรียนรู้ในบล็อกโพสต์นี้: แผงประสิทธิภาพที่เร็วขึ้น 400% ผ่านการรับรู้

ตัวเลือก VM ของ JavaScript ขาดหายไป

ต้นแบบเริ่มต้นไม่มีตัวเลือก VM ของ JavaScript นักพัฒนาซอฟต์แวร์ใช้ข้อมูลดังกล่าวเพื่อเจาะลึกและมุ่งเน้นไปที่การวิเคราะห์อินสแตนซ์ VM ที่เฉพาะเจาะจง

ตอนนี้เราได้เพิ่มตัวเลือก VM ของ JavaScript ในแผงประสิทธิภาพแล้ว โดยจะแสดงรายการแบบเลื่อนลงของอินสแตนซ์ VM ของ JavaScript ทั้งหมดที่มีอยู่ เมื่อเลือกอินสแตนซ์ แผงประสิทธิภาพจะโหลดโปรไฟล์ CPU ของอินสแตนซ์นั้น

แท็บโครงสร้างการโทร

รองรับรูปแบบไฟล์ cpuprofile

ก่อนหน้านี้แผงประสิทธิภาพรองรับเฉพาะไฟล์การติดตามเท่านั้น ซึ่งเป็นไฟล์ JSON ที่มีอาร์เรย์ของเหตุการณ์การติดตาม

ในทางกลับกัน โปรไฟล์ CPU ที่รองรับ JS Profiler ซึ่งเป็นไฟล์นามสกุล .cpuprofile ที่มีออบเจ็กต์ JSON ซึ่งมีลักษณะดังนี้

{
    // The list of profile nodes. First item is the root node.
    nodes: ProfileNode[];
    // Profiling start timestamp in microseconds.
    startTime: number;
    // Profiling end timestamp in microseconds.
    endTime: number;
    // Ids of samples at top nodes.
    samples?: integer[];
    // Time intervals between adjacent samples in microseconds.
    // The first delta is relative to the profile startTime.
    timeDeltas?: integer[];
}

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

ในเบื้องหลัง เราตรวจสอบความแตกต่างของโครงสร้างวัตถุโดยใช้นิพจน์ทั่วไป หากเนื้อหาไฟล์ขึ้นต้นด้วย {"nodes":[ แสดงว่าเป็นโปรไฟล์ CPU ไม่เช่นนั้นจะเป็นไฟล์ติดตาม

เมื่อพบประเภทเนื้อหาแล้ว เราจะประมวลผลเนื้อหานั้น สำหรับไฟล์การย้ายข้อมูล เราจะแยกวิเคราะห์เหตุการณ์และสร้างไทม์ไลน์ สำหรับโปรไฟล์ CPU เราจะแยกวิเคราะห์ออบเจ็กต์ JSON และสร้างแผนภูมิ Flame Chart

บทสรุป

ใช้แผงประสิทธิภาพเพื่อประสบการณ์การสร้างโปรไฟล์ที่มีประสิทธิภาพยิ่งขึ้น ทั้งสำหรับเว็บไซต์และการปรับโปรไฟล์ประสิทธิภาพของ CPU ในแอปพลิเคชัน Node.js และ Deno

หากมีความคิดเห็นหรือคำแนะนำ โปรดเพิ่มความคิดเห็นในข้อบกพร่องนี้ หรือติดต่อโดยใช้ตัวเลือกข้อใดข้อหนึ่งต่อไปนี้

ดาวน์โหลดเวอร์ชันตัวอย่าง

ลองใช้ Chrome Canary, Dev หรือ เบต้า เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องทางพรีวิวเหล่านี้จะทำให้คุณเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และพบปัญหาในเว็บไซต์ก่อนผู้ใช้

ติดต่อทีม Chrome DevTools

ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่และการเปลี่ยนแปลงในโพสต์ หรืออื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ

  • ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
  • รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   เพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
  • ทวีตที่ @ChromeDevTools
  • แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ