ขณะนี้การเริ่มต้นเครื่องมือสำหรับนักพัฒนาเว็บเร็วขึ้นประมาณ 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 เป็นสตริง JS" และ "Deserialize JS string" นั้นซ้ำซ้อนและคุณสามารถข้ามได้
รายละเอียดทางเทคนิค: RenderFrameHostImpl::ExecuteJavaScript
สิ่งที่เราปรับปรุง
เราได้เปิดตัวเมธอด mojo API อีกวิธีหนึ่งซึ่งช่วยให้เราส่งชื่อออบเจ็กต์ เมธอดที่จะถูกเรียก และรายการอาร์กิวเมนต์ได้โดยตรง แทนที่จะต้องสร้างสตริงซอร์สโค้ด JavaScript วิธีนี้ช่วยให้เราข้ามการทำให้เป็นอนุกรมและดีซีเรียลไลซ์ได้ และช่วยให้ไม่จำเป็นต้องแยกวิเคราะห์โค้ด JavaScript
สำหรับรายละเอียดทางเทคนิคเกี่ยวกับวิธีการที่เรานำการเพิ่มประสิทธิภาพนี้ไปใช้ โปรดอ่านแพตช์ทั้งสองนี้
- CL 2431864: [devtools] ลดค่าใช้จ่ายด้านประสิทธิภาพของการส่งอีเมลในส่วนหน้า
- CL 2442012: [devtools] ใช้
ExecuteJavaScriptMethodใน DevTools
มีอิทธิพล
ในการวัดประสิทธิภาพของการเปลี่ยนแปลง เราได้ทำการวัดบางอย่างโดยเปรียบเทียบการแก้ไข Chromium ระหว่าง cb971089a058 และ 4f213b39d581 (ก่อนและหลังการเปลี่ยนแปลง)
สำหรับการแก้ไขทั้งสอง เราได้เรียกใช้สถานการณ์ต่อไปนี้ 5 ครั้ง:
- บันทึกการติดตามโดยใช้
chrome://tracing - เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน DevTools
- ดูการติดตาม
CrRendererMainที่บันทึกไว้และเปรียบเทียบเมตริกเฉพาะ V8
จากการทดสอบเหล่านี้ เครื่องมือสำหรับนักพัฒนาเว็บเปิดได้เร็วขึ้นประมาณ 13% (จาก 11.2 วินาทีเป็น 10 วินาที) ด้วยการเพิ่มประสิทธิภาพ
ไฮไลต์ ระยะเวลา CPU
| ชื่อเมธอด | ไม่ได้เพิ่มประสิทธิภาพ (ms) | เพิ่มประสิทธิภาพ (ms) | ความแตกต่าง (มิลลิวินาที) | การเพิ่มความเร็ว (%) |
| รวม | 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 DevTools
ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่และการเปลี่ยนแปลงในโพสต์ หรืออื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ
- ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
- รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม
> ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ - ทวีตที่ @ChromeDevTools
- แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ