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

Jecelyn Yeen
Nancy Li
Nancy Li
LinkedIn

เราจะนำแผงเครื่องมือสร้างโปรไฟล์ JavaScript ออกจาก Chrome 124 นับจากนี้ไป ให้ใช้แผงประสิทธิภาพเพื่อบันทึกโปรไฟล์ประสิทธิภาพ CPU ของ Node.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เราจะค่อยๆ หยุดให้บริการ JS Profiler ใน4 ระยะเพื่อให้นักพัฒนาแอปมีเวลาเพียงพอในการปรับตัวและนำไปใช้

ปัญหาสำคัญและวิธีที่เราแก้ไขปัญหา

จากความคิดเห็นที่เราได้รับ ข้อกังวลเร่งด่วนที่สุดมุ่งเน้นที่ปัญหาหลัก 3 ข้อต่อไปนี้

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

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

โหลดช้า

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

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

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

การแก้ปัญหาคอขวดเหล่านี้ช่วยให้การโหลดไฟล์ขนาดใหญ่เร็วขึ้น 80% 🎉

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

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

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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