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