แผงไทม์ไลน์สำหรับเครื่องมือสำหรับนักพัฒนาเว็บเป็นจุดแรกที่ดีที่สุดในเส้นทางการเพิ่มประสิทธิภาพ ภาพรวมกิจกรรมของแอปแบบรวมศูนย์นี้จะช่วยให้คุณวิเคราะห์ได้ว่ามีการใช้เวลาไปกับตำแหน่งใดในการโหลด เขียนสคริปต์ แสดงผล และลงสี เมื่อเร็วๆ นี้ เราได้อัปเกรดไทม์ไลน์ด้วยเครื่องมือที่ละเอียดยิ่งขึ้นเพื่อให้คุณได้เห็นมุมมองเชิงลึกเพิ่มเติมเกี่ยวกับประสิทธิภาพของแอป
เราได้เพิ่มฟีเจอร์ต่อไปนี้
- เครื่องมือสร้างโปรไฟล์ JavaScript ที่ผสานรวม (รวมแผนภูมิเปลวไฟด้วย)
- Frame Viewer เพื่อช่วยให้คุณเห็นภาพเลเยอร์แบบผสม
- เครื่องมือสร้างโปรไฟล์สีสำหรับการเจาะลึกรายละเอียดกิจกรรมการวาดภาพของเบราว์เซอร์
โปรดทราบว่าการใช้ตัวเลือกการจับภาพสีที่อธิบายไว้ในบทความนี้จะก่อให้เกิดค่าใช้จ่ายด้านประสิทธิภาพ ดังนั้นให้เปิดฝาเฉพาะเมื่อต้องการเท่านั้น
เครื่องมือสร้างโปรไฟล์ JavaScript ที่ผสานรวม
หากคุณเคยลองเข้าไปที่แผงโปรไฟล์ คุณอาจคุ้นเคยกับเครื่องมือสร้างโปรไฟล์ CPU ของ JavaScript เครื่องมือนี้จะวัดเวลาที่ใช้เวลาในการดำเนินการในฟังก์ชัน JavaScript เมื่อดูโปรไฟล์ JavaScript ด้วยแผนภูมิ Flame แผนภูมิ คุณสามารถแสดงภาพการประมวลผล JavaScript ของคุณเมื่อเวลาผ่านไป
ตอนนี้คุณสามารถดูรายละเอียดเกี่ยวกับการดำเนินการ JavaScript ได้ในแผงไทม์ไลน์ เมื่อเลือกตัวเลือกการจับภาพ JS Profiler คุณจะเห็นสแต็กการเรียกใช้ JavaScript ในไทม์ไลน์พร้อมกับเหตุการณ์อื่นๆ ของเบราว์เซอร์ การเพิ่มฟีเจอร์นี้ลงในไทม์ไลน์จะช่วยปรับปรุงเวิร์กโฟลว์การแก้ไขข้อบกพร่อง แต่นอกเหนือจากนั้น คุณจะสามารถดู JavaScript ในบริบทและระบุส่วนของโค้ดที่มีผลต่อเวลาในการโหลดและการแสดงผลได้
นอกจากเครื่องมือสร้างโปรไฟล์ JavaScript แล้ว เรายังได้ผสานรวมมุมมองแผนภูมิ Flame ไว้ในแผงไทม์ไลน์ด้วย ตอนนี้คุณสามารถดูกิจกรรมของแอปได้ในรูปแบบ Waterfall เวอร์ชันคลาสสิกของกิจกรรมหรือแบบ Flame Chart ไอคอนแผนภูมิเปลวไฟช่วยให้คุณสามารถสลับระหว่างมุมมองทั้งสองนี้ได้
โปรแกรมดูเฟรม
ศิลปะของการประกอบเลเยอร์เป็นอีกแง่มุมหนึ่งของเบราว์เซอร์ที่ส่วนใหญ่ถูกซ่อนไว้ไม่ให้นักพัฒนาแอปเห็น เมื่อใช้เท่าที่จำเป็นและระมัดระวัง เลเยอร์อาจช่วยหลีกเลี่ยงการทาสีซ้ำที่มีราคาสูงได้และเพิ่มประสิทธิภาพได้อย่างมาก แต่การคาดเดาว่าเบราว์เซอร์จะประกอบเนื้อหาของคุณอย่างไรก็ไม่ใช่เรื่องง่ายนัก การใช้ตัวเลือกการจับภาพแบบ Paint ใหม่ของไทม์ไลน์จะช่วยให้คุณสามารถแสดงภาพเลเยอร์แบบผสมในแต่ละเฟรมของการบันทึก
เมื่อคุณเลือกแถบเฟรมสีเทาเหนือเทรดหลัก แผงเลเยอร์ของแผงจะแสดงโมเดลภาพของเลเยอร์ที่ประกอบแอปของคุณ
คุณซูม หมุน แล้วลากโมเดลเลเยอร์เพื่อสำรวจเนื้อหาได้ การวางเมาส์เหนือเลเยอร์จะแสดงตำแหน่งปัจจุบันของเลเยอร์นั้นบนหน้า การคลิกขวาที่เลเยอร์จะช่วยให้คุณข้ามไปยังโหนดที่เกี่ยวข้องในแผงองค์ประกอบได้ คุณลักษณะเหล่านี้จะแสดงสิ่งที่ถูกโปรโมตเป็นเลเยอร์ หากเลือกเลเยอร์ คุณจะดูสาเหตุที่เลเยอร์ได้รับการโปรโมตได้ในแถวเหตุผลประกอบ
เครื่องมือสร้างโปรไฟล์การแสดงผล
สุดท้ายแต่ไม่ท้ายสุด เราได้เพิ่มเครื่องมือสร้างโปรไฟล์สีเพื่อช่วยให้คุณระบุปัญหาการชนที่เกิดจากสีพ่นราคาแพง ฟีเจอร์นี้ทำให้ไทม์ไลน์มีรายละเอียดเพิ่มเติมเกี่ยวกับงานที่ Chrome ทำระหว่างกิจกรรมการแสดงผล
สำหรับผู้เริ่มต้น ตอนนี้คุณสามารถระบุเนื้อหาภาพที่สอดคล้องกับกิจกรรมสีแต่ละกิจกรรมได้ง่ายกว่าที่เคย เมื่อเลือกเหตุการณ์ที่เป็นสีเขียวในไทม์ไลน์ แผงรายละเอียดจะแสดงตัวอย่างพิกเซลจริงที่มีการทาสี
หากคุณต้องการเจาะลึกรายละเอียดจริงๆ ให้เปลี่ยนไปใช้แผงเครื่องมือสร้างโปรไฟล์ เครื่องมือสร้างโปรไฟล์นี้แสดงคำสั่งวาดที่เบราว์เซอร์ดำเนินการสำหรับสีที่เลือก เพื่อช่วยให้คุณเชื่อมต่อคำสั่งแบบเนทีฟเหล่านี้กับเนื้อหาจริงในแอป คุณสามารถคลิกขวาที่การเรียกใช้การวาด* และข้ามไปยังโหนดที่เกี่ยวข้องในแผงองค์ประกอบได้โดยตรง
เส้นบอกเวลาสั้นๆ ที่ด้านบนของแผงทำให้คุณสามารถแสดงขั้นตอนการวาดภาพอีกครั้ง และช่วยให้ทราบว่าการดำเนินการใดมีค่าใช้จ่ายสูงสำหรับเบราว์เซอร์ การดำเนินการวาดจะมีการระบุรหัสสีดังนี้ สีชมพู (รูปร่าง) สีน้ำเงิน (บิตแมป) สีเขียว (ข้อความ) และสีม่วง (เบ็ดเตล็ด) ความสูงของแท่งบอกระยะเวลาการโทร ดังนั้นการตรวจสอบแท่งทรงสูงจะช่วยให้คุณเข้าใจได้ว่าสีใดสีหนึ่งมีราคาสูง
สร้างโปรไฟล์และผลกำไร!
เมื่อพูดถึงการเพิ่มประสิทธิภาพ ความรู้เกี่ยวกับเบราว์เซอร์นั้นทรงพลังอย่างเหลือเชื่อ การอัปเดตไทม์ไลน์เหล่านี้ช่วยให้คุณเห็นรายละเอียดให้เห็นได้ชัดเจนถึงความสัมพันธ์ระหว่างโค้ดกับกระบวนการแสดงผลของ Chrome ลองใช้ตัวเลือกใหม่ๆ เหล่านี้ในไทม์ไลน์และดูว่า Chrome DevTools จะทำอะไรได้บ้างเพื่อปรับปรุงเวิร์กโฟลว์การตามล่าหาชีวิตของคุณ