แผงเครื่องมือสร้างโปรไฟล์ JavaScript จะเลิกใช้งานใน Chrome 124 นับจากนี้ไป ให้ใช้แผงประสิทธิภาพเพื่อโปรไฟล์ประสิทธิภาพ CPU ของ Node.js
เหตุใดเราจึงเลิกใช้งานเครื่องมือสร้างโปรไฟล์ JavaScript (เครื่องมือสร้างโปรไฟล์ JS)
ทีมเครื่องมือสำหรับนักพัฒนาเว็บจะเลิกใช้งาน JS Profiler ในท้ายที่สุดใน Chrome 58 ซึ่งมีสาเหตุหลายประการดังนี้
- แอปไม่ได้รับการพัฒนาอย่างต่อเนื่องอีกต่อไป JS Profiler ไม่ได้รับข้อมูลอัปเดตที่สำคัญใดๆ มาเป็นเวลาหลายปีแล้ว และทีมก็ไม่มีทรัพยากรสำหรับการพัฒนาอย่างต่อเนื่อง
- ประสบการณ์การทำโปรไฟล์ที่มีประสิทธิภาพยิ่งขึ้น แผงประสิทธิภาพใช้สำหรับการวิเคราะห์ประสิทธิภาพทุกประเภทอยู่แล้ว และด้วยความสามารถในการโปรไฟล์ประสิทธิภาพของ CPU ของ JavaScript ใน Node.js จึงเป็นการเหมาะสมที่จะรวมทุกอย่างไว้ในที่เดียวเพื่อความสอดคล้องและประสิทธิภาพ
- แผงประสิทธิภาพดีกว่า เราดำเนินการปรับปรุงอย่างต่อเนื่องด้วยการเพิ่มฟีเจอร์และการปรับปรุงใหม่ๆ เพื่อทำให้เครื่องมือนี้มีประสิทธิภาพและใช้งานง่ายยิ่งขึ้นสำหรับการวิเคราะห์ประสิทธิภาพ
คุณควรทำอย่างไรหลังจากเลิกใช้งาน
หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีโปรไฟล์ประสิทธิภาพของ CPU ของ JavaScript โปรดดูประสิทธิภาพ Node.js ของโปรไฟล์
เคล็ดลับบางประการสำหรับการใช้แผงประสิทธิภาพมีดังนี้
- ใช้แผนภูมิเปลวไฟเพื่อระบุจุดคอขวดด้านประสิทธิภาพ
- ใช้แท็บล่างขึ้นและโครงสร้างการเรียกเพื่อทำความเข้าใจความสัมพันธ์ระหว่างฟังก์ชัน
เราจะจัดการกับการเลิกใช้งานอย่างไร
เราได้พัฒนาต้นแบบและเผยแพร่คำขอแสดงความคิดเห็น (RFC) แบบสาธารณะบน GitHub เพื่อขอความคิดเห็นจากนักพัฒนาซอฟต์แวร์
นอกจากนี้ เรายังติดต่อผู้เชี่ยวชาญที่เป็นนักพัฒนาซอฟต์แวร์อย่างแข็งขันเพื่อทดสอบต้นแบบ พร้อมระบุข้อกังวลหรือปัญหาต่างๆ เพื่อให้มั่นใจว่าแผงประสิทธิภาพนั้นตรงตามความต้องการหลักในการสร้างโปรไฟล์
เรากำลังทยอยเลิกใช้เครื่องมือสร้างโปรไฟล์ JS 4 ขั้นตอนเพื่อให้นักพัฒนาซอฟต์แวร์มีเวลาเพียงพอในการปรับเปลี่ยนและนำไปใช้
ปัญหาหลักๆ และวิธีที่เราแก้ไข
จากความคิดเห็นที่เราได้รับ ข้อกังวลที่เร่งด่วนที่สุดนำไปสู่ปัญหาหลัก 3 ประการดังนี้
- รองรับรูปแบบไฟล์
.cpuprofile
JS Profiler ใช้รูปแบบไฟล์อื่น แผงประสิทธิภาพก็ควรรองรับ - โหลดช้า ดูเหมือนว่าความเร็วในการโหลดของแผงจะช้าซึ่งรบกวนกระบวนการทำโปรไฟล์
- ไม่มีตัวเลือก JavaScript VM ไม่มีความสามารถในการทำโปรไฟล์ของตัวเลือกอินสแตนซ์ VM ของ JavaScript ที่จำกัดในบางสถานการณ์
ลองมาดูปัญหาแต่ละอย่างและดูวิธีแก้ไขปัญหากัน
โหลดช้า
นักพัฒนาแอปบอกเราว่าแผงประสิทธิภาพใช้เวลาโหลดไฟล์ข้อมูลขนาดใหญ่นานเกินไป และบางครั้งก็ขัดข้องด้วย
เราใช้เครื่องมือสำหรับนักพัฒนาเว็บในการวิเคราะห์เครื่องมือสำหรับนักพัฒนาเว็บ (เราเรียกว่า "เครื่องมือสำหรับนักพัฒนาเว็บ") เราพบปัญหาและได้เพิ่มประสิทธิภาพหลายรายการ:
- แทนที่
Set
ด้วยโครงสร้างข้อมูลArray
แล้ว - นำโครงสร้างข้อมูล
Map
ที่ไม่จำเป็นออกแล้ว - ฟังก์ชันที่เกิดซ้ำจากการเปลี่ยนโครงสร้างภายในเป็นทำซ้ำ (สำหรับการวนซ้ำ) เพื่อลดการใช้งานสแต็กหน่วยความจำ
การแก้ไขจุดคอขวดเหล่านี้ทำให้เราโหลดไฟล์ขนาดใหญ่ได้เร็วขึ้น 80% 🎉
อ่านเพิ่มเติมเกี่ยวกับสิ่งที่ได้เรียนรู้จากบล็อกโพสต์นี้: แผงประสิทธิภาพที่เร็วขึ้น 400% ผ่าน Perf-ception
ตัวเลือก VM ของ JavaScript ที่ขาดหายไป
ต้นแบบเริ่มต้นไม่มีตัวเลือก JavaScript VM นักพัฒนาซอฟต์แวร์ใช้เพื่อเจาะลึกและมุ่งเน้นที่การวิเคราะห์อินสแตนซ์ VM ที่เฉพาะเจาะจง
ตอนนี้เราได้เพิ่มตัวเลือก JavaScript VM ลงในแผงประสิทธิภาพแล้ว โดยจะแสดงรายการแบบเลื่อนลงของอินสแตนซ์ 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
ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่ๆ และการเปลี่ยนแปลงในโพสต์หรือเรื่องอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ
- ส่งคำแนะนำหรือความคิดเห็นถึงเราผ่าน crbug.com
- รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
- ทวีตที่ @ChromeDevTools
- แสดงความคิดเห็นเกี่ยวกับ "มีอะไรใหม่ในวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ" หรือเคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บวิดีโอ YouTube