การปรับปรุงเวลาเริ่มต้นของเครื่องมือสำหรับนักพัฒนาเว็บ

Maksim Sadym

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บเริ่มทำงานเร็วขึ้นประมาณ 13% 🎉 (จาก 11.2 วินาทีเหลือ 10 วินาที)

TL;DR; ผลลัพธ์ที่ได้คือการนำการทำให้เป็นแบบอนุกรมซ้ำซ้อนออก

ภาพรวม

ขณะที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เริ่มต้นขึ้น เครื่องมือจะต้องเรียกใช้เครื่องมือ V8 JavaScript

กลไกที่ Chromium ใช้ส่งคําสั่งของเครื่องมือสําหรับนักพัฒนาเว็บไปยัง V8 (และสำหรับ IPC โดยทั่วไป) เรียกว่า mojo เพื่อนร่วมทีมของฉันอย่าง Benedikt Meurer และ Sigurd Schneider ค้นพบปัญหาด้านประสิทธิภาพขณะทำงานในอีกโปรเจ็กต์หนึ่ง และคิดไอเดียที่จะปรับปรุงกระบวนการนี้ด้วยการนําขั้นตอนที่ซ้ำซ้อน 2 ขั้นตอนในการส่งและรับข้อความเหล่านี้ออก

มาดูวิธีการทำงานของกลไก mojo กัน

กลไก mojo

มีคำสั่ง mojo EvaluateScript ที่เรียกใช้คำสั่ง JS โดยจะจัดรูปแบบคำสั่ง JS ทั้งหมด รวมถึง arguments เป็นสตริงซอร์สโค้ด JavaScript ที่eval() ได้ ดังที่คุณอาจทราบ สตริงเหล่านี้อาจยาวและราคาแพง หลังจากที่ V8 ได้รับคําสั่งแล้ว ระบบจะแปลงสตริงโค้ด JavaScript เหล่านี้ให้เป็นรูปแบบเดิมก่อนเรียกใช้ กระบวนการจัดเรียงและถอดการจัดเรียงสำหรับข้อความแต่ละรายการนี้ทำให้เกิดค่าใช้จ่ายเพิ่มเติมอย่างมาก

Benedikt Meurer พบว่าการทำให้เป็นอนุกรมและการทำให้ไม่เป็นอนุกรมของ arguments นั้นค่อนข้างสิ้นเปลือง และขั้นตอนทั้งหมดของ "ทำให้คำสั่ง JS เป็นสตริง JS" และ "ทำให้สตริง JS เป็นคำสั่ง JS" นั้นซ้ำซ้อนและสามารถข้ามได้

รายละเอียดทางเทคนิค: RenderFrameHostImpl::ExecuteJavaScript

สิ่งที่เราปรับปรุง

เราได้เปิดตัวเมธอด mojo API อีกรายการหนึ่งซึ่งช่วยให้เราส่งชื่อออบเจ็กต์ เมธอดที่จะเรียก และรายการอาร์กิวเมนต์ได้โดยตรง แทนที่จะต้องสร้างสตริงของซอร์สโค้ด JavaScript ซึ่งช่วยให้เราข้ามการจัดรูปแบบและการถอดรูปแบบได้ และไม่ต้องแยกวิเคราะห์โค้ด JavaScript

ดูรายละเอียดทางเทคนิคเกี่ยวกับวิธีที่เราใช้การเพิ่มประสิทธิภาพนี้ได้ในแพตช์ 2 รายการต่อไปนี้

1. CL 2431864: [devtools] ลดค่าใช้จ่ายด้านประสิทธิภาพของการส่งข้อความในหน้าเว็บ
2. CL 2442012: [devtools] Use ExecuteJavaScriptMethod in DevTools

ผลกระทบ

ในการวัดประสิทธิภาพของการเปลี่ยนแปลง เราได้ทำการวัดผลบางอย่างโดยเปรียบเทียบ Chromium เวอร์ชัน cb971089a058 กับ 4f213b39d581 (ก่อนและหลังการเปลี่ยนแปลง)

สำหรับการแก้ไขทั้ง 2 ครั้ง เราได้เรียกใช้สถานการณ์ต่อไปนี้ 5 ครั้ง

1. บันทึกการติดตามโดยใช้ chrome://tracing
2. เปิดเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
3. รับการติดตาม CrRendererMain ที่บันทึกไว้และเปรียบเทียบเมตริกเฉพาะ V8

การทดสอบเหล่านี้แสดงให้เห็นว่าเครื่องมือสำหรับนักพัฒนาเว็บเปิดได้เร็วขึ้นประมาณ 13% (จาก 11.2 วินาทีเหลือ 10 วินาที) เมื่อเพิ่มประสิทธิภาพ

ไฮไลต์ ระยะเวลาของ CPU

ตารางการเปรียบเทียบเมตริกการติดตามแบบเต็ม

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

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

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

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

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

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