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

Jecelyn Yeen

Nancy Li

แผงเครื่องมือสร้างโปรไฟล์ 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