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

Maksim Sadym

Twitter GitHub

หมายเหตุ: หากสนใจช่วยปรับปรุงเครื่องมือสำหรับนักพัฒนาเว็บ ลงชื่อสมัครเข้าร่วมการศึกษาวิจัยผู้ใช้ของ Google ที่นี่

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

TL;DR; ผลลัพธ์ที่ได้คือการนำการเรียงอันดับที่ซ้ำกันออก

ภาพรวม

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

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

เรามาเจาะลึกวิธีการทำงานของกลไก mojo กัน

กลไก mojo

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

Benedikt Meurer พบว่าการซีเรียลไลซ์และการดีซีเรียลของ arguments นั้นค่อนข้างแพง และขั้นตอน "Serialize JS string to JS string" และ "Deserialize JS string" ทั้งหมดนั้นมีขั้นตอนซ้ำซ้อนและข้ามไปได้

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

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

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

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

1. CL 2431864: [devtools] ลดค่าใช้จ่ายในการดำเนินการส่งข้อความในฟรอนท์เอนด์
2. CL 2442012: [devtools] ใช้ ExecuteJavaScriptMethod ใน DevTools

มีอิทธิพล

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

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

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

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

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

ชื่อเมธอด	ไม่ได้เพิ่มประสิทธิภาพ (มิลลิวินาที)	เพิ่มประสิทธิภาพ (มิลลิวินาที)	ความแตกต่าง (มิลลิวินาที)	ปรับปรุงความเร็ว (%)
รวม	11,213.19	9,953.99	-1,259.20	12.65%
v8.run	499.67	3.61	-496.06	12.65%
V8.Execute	1,654.87	1,349.61	-305.25	3.07%
v8.callFunction	1,171.84	1,339.77	167.94	-1.69%
v8.compile	133.93	3.56	-130.37	1.31%

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

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

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

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

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

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

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