โหมดการวาดภาพต่อเนื่องสําหรับการทำโปรไฟล์สีพร้อมใช้งานแล้วใน Chrome Canary บทความนี้จะอธิบายวิธีระบุปัญหาในเวลาเพนท์หน้าเว็บและวิธีใช้เครื่องมือใหม่นี้เพื่อตรวจหาจุดคอขวดในประสิทธิภาพการวาดภาพ
การตรวจสอบเวลาในการวาดภาพในหน้าเว็บของคุณ
คุณสังเกตเห็นว่าหน้าเว็บเลื่อนได้ไม่ลื่นไหล นี่คือวิธีที่คุณจะเริ่มจัดการกับปัญหา สำหรับตัวอย่าง เราจะใช้หน้าเดโม Things We Left On The Moon โดย Dan Cederholm เป็นตัวอย่าง
คุณเปิดเครื่องมือตรวจสอบเว็บ เริ่มบันทึกไทม์ไลน์ และเลื่อนหน้าเว็บขึ้นและลง จากนั้นดูที่เส้นควบคุมเวลาแนวตั้ง ซึ่งจะแสดงสิ่งที่เกิดขึ้นในแต่ละเฟรม
ถ้าคุณเห็นว่าใช้เวลาส่วนใหญ่ไปกับการวาดภาพ (แท่งสีเขียวขนาดใหญ่ที่สูงกว่า 60 FPS) ก็ต้องพิจารณาอย่างละเอียดว่าเหตุใดจึงเกิดสิ่งนี้ขึ้น หากต้องการตรวจสอบการแสดงผล ให้ใช้การตั้งค่าแสดงสี่เหลี่ยมผืนผ้าสีของเครื่องมือตรวจสอบเว็บ (ไอคอนฟันเฟืองที่มุมขวาล่างของเครื่องมือตรวจสอบเว็บ) ซึ่งจะแสดงภูมิภาค ที่ Chrome แสดงผล
มีเหตุผลที่ Chrome ปรับสีพื้นที่ของหน้าเว็บใหม่ดังนี้
- โหนด DOM มีการเปลี่ยนแปลงใน JavaScript ซึ่งทำให้ Chrome คำนวณเลย์เอาต์ของหน้าเว็บใหม่
- ภาพเคลื่อนไหวกำลังเล่นที่อัปเดตตามรอบแบบเฟรม
- การโต้ตอบของผู้ใช้ เช่น การวางเมาส์เหนือโฆษณา จะทำให้เกิดการเปลี่ยนแปลงรูปแบบขององค์ประกอบบางรายการ
- การดำเนินการอื่นๆ ที่ทำให้เลย์เอาต์ของหน้าเว็บเปลี่ยนไป
ในฐานะนักพัฒนาซอฟต์แวร์ คุณจำเป็นต้องตระหนักถึงการทาสีใหม่ที่เกิดขึ้นในหน้าเว็บของคุณ
การมองที่สี่เหลี่ยมสีเป็นวิธีที่ดี ในภาพหน้าจอตัวอย่างด้านบน คุณจะเห็นว่าทั้งหน้าจอถูกบังด้วยสี่เหลี่ยมผืนผ้าใหญ่สี ซึ่งหมายความว่าทั้งหน้าจอจะปรับสีใหม่ขณะที่คุณเลื่อน ซึ่งไม่ใช่ผลดีแต่อย่างใด ในกรณีนี้ ปัญหานี้เกิดจากสไตล์ CSS background-attachment:fixed ซึ่งทำให้ภาพพื้นหลังของหน้าอยู่ที่ตำแหน่งเดียวกันขณะที่เนื้อหาของหน้าเว็บย้ายไปอยู่ด้านบนเมื่อคุณเลื่อน
หากคุณระบุว่าการทาสีใหม่ครอบคลุมพื้นที่ขนาดใหญ่และ/หรือใช้เวลานาน คุณจะมี 2 ตัวเลือก ได้แก่
- คุณอาจลองเปลี่ยนเลย์เอาต์ของหน้าเพื่อลดปริมาณการแสดงผล หากเป็นไปได้ Chrome จะแสดงหน้าเว็บที่มองเห็นได้เพียงครั้งเดียวและเพิ่มส่วนที่มองไม่เห็นเมื่อคุณเลื่อนลง อย่างไรก็ตาม ก็มีบางกรณีที่ Chrome จำเป็นต้องทาสีพื้นที่บางส่วนใหม่ ตัวอย่างเช่น กฎ CSS
position:fixedซึ่งมักใช้สำหรับองค์ประกอบการนำทางที่อยู่ในตำแหน่งเดิม ก็อาจทำให้เกิดการวาดใหม่เหล่านี้ได้ - หากต้องการรักษาเลย์เอาต์ของหน้าเว็บไว้ ให้ลองลดค่าใช้จ่ายในการทาสีพื้นที่ที่มีการทาสีใหม่ สไตล์ CSS แต่ละแบบจะมีค่าใช้จ่ายในการวาดภาพไม่เหมือนกัน บางสไตล์ให้ผลกระทบน้อย บางสไตล์ก็มีคุณค่ามาก การคิดหาค่าใช้จ่ายในการทาสีบางสไตล์อาจเป็นงานหนัก ซึ่งทำได้โดยการสลับรูปแบบในแผงองค์ประกอบ แล้วดูความแตกต่างในการบันทึกไทม์ไลน์ ซึ่งหมายถึงการสลับแผงและทำการบันทึกจำนวนมาก ซึ่งเป็นเวลาที่โหมดการวาดภาพต่อเนื่องจะเข้ามามีบทบาท
โหมดการวาดภาพต่อเนื่อง
โหมดการวาดภาพต่อเนื่องเป็นเครื่องมือที่จะช่วยคุณระบุว่าองค์ประกอบใดมีค่าใช้จ่ายสูงในหน้าเว็บ โดยทำให้หน้าเว็บอยู่ในสถานะที่มีการทาสีใหม่เสมอ ซึ่งเป็นการแสดงให้เห็นว่าผลงานภาพวาดเกิดขึ้นมากเพียงใด จากนั้นคุณอาจซ่อนองค์ประกอบและเปลี่ยนรูปแบบ โดยดูตัวนับเพื่อทำความเข้าใจว่าอะไรที่ช้า
ตั้งค่า
หากต้องการใช้โหมดการวาดภาพต่อเนื่อง คุณต้องใช้ Chrome Canary
ในระบบ Linux (และ Mac บางรุ่น) คุณต้องตรวจสอบว่า Chrome ทำงานในโหมดการเขียนองค์ประกอบ คุณเปิดใช้การตั้งค่านี้อย่างถาวรได้โดยใช้การตั้งค่า GPU Compositing ในทุกหน้าใน about:flags
วิธีการเริ่มต้น
คุณเปิดใช้โหมดการวาดภาพต่อเนื่องได้ผ่านช่องทำเครื่องหมายเปิดใช้การทาสีหน้าแบบต่อเนื่องอีกครั้งในการตั้งค่าของเครื่องมือตรวจสอบเว็บ (ไอคอนฟันเฟืองที่มุมขวาล่างของเครื่องมือตรวจสอบเว็บ)
หน้าจอขนาดเล็กที่มุมขวาบนจะแสดงจำนวนครั้งของการแสดงผลที่วัดได้ในหน่วยมิลลิวินาที กล่าวอย่างเจาะจงก็คือ
- เวลาการแสดงผลล่าสุดทางด้านซ้าย
- ค่าต่ำสุดและสูงสุดของกราฟปัจจุบันทางด้านขวา
- แผนภูมิแท่งแสดงประวัติของ 80 เฟรมสุดท้ายที่ด้านล่าง (เส้นในแผนภูมิระบุว่าเป็นจุดอ้างอิง 16 มิลลิวินาที)
การวัดเวลาสีจะขึ้นอยู่กับความละเอียดของหน้าจอ ขนาดหน้าต่าง และฮาร์ดแวร์ที่ Chrome ทำงานอยู่ โปรดทราบว่าสิ่งเหล่านี้อาจ แตกต่างออกไปสำหรับผู้ใช้
ขั้นตอนการทำงาน
นี่คือวิธีใช้โหมดการวาดภาพต่อเนื่องเพื่อติดตามองค์ประกอบและสไตล์ที่เพิ่มค่าใช้จ่ายในการวาดภาพจำนวนมาก
- เปิดการตั้งค่าของเครื่องมือตรวจสอบเว็บ แล้วเลือกเปิดใช้การวาดภาพหน้าอย่างต่อเนื่อง
- ไปที่แผง "องค์ประกอบ" และข้ามแผนผัง DOM ด้วยปุ่มลูกศรหรือโดยการเลือกองค์ประกอบในหน้า
- ใช้แป้นพิมพ์ลัด H ซึ่งเป็นตัวช่วยที่เพิ่งเพิ่มเข้ามาใหม่เพื่อเปิด/ปิดการแสดงองค์ประกอบ
- ดูที่กราฟเวลาระบายสี แล้วลองมองหาองค์ประกอบที่เพิ่มเวลาในการวาดภาพนานๆ
- ตรวจสอบรูปแบบ CSS ขององค์ประกอบนั้น สลับเปิดและปิดขณะดูกราฟเพื่อค้นหารูปแบบที่ทำให้กราฟช้าลง
- โปรดเปลี่ยนสไตล์นี้และบันทึกไทม์ไลน์อีกครั้งเพื่อดูว่าวิธีนี้ทำให้หน้าเว็บมีประสิทธิภาพดีขึ้นหรือไม่
ภาพเคลื่อนไหวด้านล่างแสดงการสลับรูปแบบและผลกระทบต่อเวลาระบายสี
ตัวอย่างนี้แสดงให้เห็นว่าการปิดใช้รูปแบบ CSS box-shadow หรือ border-radius อย่างใดอย่างหนึ่งช่วยลดเวลาในการแสดงผลได้อย่างมาก การใช้ทั้ง box-shadow และ border-radius ในองค์ประกอบหนึ่งจะทำให้มีการดำเนินการวาดภาพที่มีราคาแพงมาก เนื่องจาก Chrome เพิ่มประสิทธิภาพให้สิ่งนี้ไม่ได้ ดังนั้น หากคุณมีองค์ประกอบที่มีการทาสีใหม่จำนวนมากอย่างเช่นในตัวอย่าง คุณควรหลีกเลี่ยงชุดค่าผสมนี้
Notes
โหมดการวาดภาพต่อเนื่องจะทาสีหน้าที่มองเห็นได้ใหม่ทั้งหมด ซึ่งมักจะไม่เกิดขึ้น เมื่อเรียกดูหน้าเว็บ โดยปกติแล้วการเลื่อนจะระบายสีเฉพาะ ส่วนที่ไม่เคยเห็นมาก่อน และสำหรับการเปลี่ยนแปลงอื่นๆ ในหน้านั้น จะมีการทาสีซ้ำเฉพาะส่วนที่เล็กที่สุดเท่าที่จะเป็นไปได้ ดังนั้นให้ตรวจสอบการบันทึกไทม์ไลน์อื่นว่าการปรับปรุงสไตล์ของคุณส่งผลต่อเวลาการแสดงผลของหน้าเว็บหรือไม่
เมื่อใช้ continuous painting mode คุณอาจพบว่ารูปแบบ CSS border-radius และ box-shadow ช่วยเพิ่มเวลาในการวาดภาพ คุณเองก็ใช้ได้เหมือนกัน เพราะฟีเจอร์ดังกล่าวยอดเยี่ยมมาก และเราก็ยินดีอย่างยิ่งที่ได้พบกับคุณในวันนี้ แต่สิ่งสำคัญคือคุณต้องทราบว่าควรใช้งานเมื่อใดและที่ไหน
หลีกเลี่ยงการใช้ในบริเวณที่มีการทำสีใหม่มากเกินไปและหลีกเลี่ยงการใช้มากเกินไปโดยทั่วไป
การสาธิตแบบสด
คลิกด้านล่างเพื่อดูการสาธิตที่พอล ไอริชใช้ภาพวาดอย่างต่อเนื่องเพื่อระบุการดำเนินงานเกี่ยวกับสีที่มีราคาแพงอย่างไม่เหมือนใคร