แผง 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ