โหมดการวาดภาพอย่างต่อเนื่องสำหรับการสร้างโปรไฟล์สีพร้อมใช้งานใน 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 ในหน้าเว็บทั้งหมดใน about:flags
วิธีเริ่มต้น
คุณเปิดใช้โหมดการวาดภาพอย่างต่อเนื่องได้ผ่านช่องทําเครื่องหมายเปิดใช้การวาดภาพหน้าเว็บอย่างต่อเนื่องในการตั้งค่าของเครื่องมือตรวจสอบเว็บ (ไอคอนรูปเฟืองที่มุมขวาล่างของเครื่องมือตรวจสอบเว็บ)
จอแสดงผลขนาดเล็กที่มุมขวาบนจะแสดงเวลาในการวาดที่วัดเป็นมิลลิวินาที กล่าวโดยละเอียดคือจะแสดงข้อมูลต่อไปนี้
- เวลา Paint ที่วัดครั้งล่าสุดทางด้านซ้าย
- ค่าต่ำสุดและสูงสุดของกราฟปัจจุบันทางด้านขวา
- แผนภูมิแท่งแสดงประวัติของเฟรม 80 เฟรมล่าสุดที่ด้านล่าง (เส้นในแผนภูมิแสดง 16 มิลลิวินาทีเป็นจุดอ้างอิง)
การวัดเวลาในการวาดภาพจะขึ้นอยู่กับความละเอียดของหน้าจอ ขนาดหน้าต่าง และฮาร์ดแวร์ที่ Chrome ทำงานอยู่ โปรดทราบว่าสิ่งเหล่านี้อาจแตกต่างกันไปสำหรับผู้ใช้
ขั้นตอนการทำงาน
วิธีใช้โหมดการวาดแบบต่อเนื่องเพื่อติดตามองค์ประกอบและสไตล์ที่เพิ่มค่าใช้จ่ายในการวาดมากมีดังนี้
- เปิดการตั้งค่าของเครื่องมือตรวจสอบเว็บ แล้วเลือกเปิดใช้การวาดหน้าเว็บใหม่อย่างต่อเนื่อง
- ไปที่แผงองค์ประกอบและไปยังส่วนต่างๆ ของโครงสร้าง DOM ด้วยปุ่มลูกศรหรือเลือกองค์ประกอบในหน้า
- ใช้แป้นพิมพ์ลัด H ซึ่งเป็นตัวช่วยใหม่ที่เพิ่งเปิดตัวเพื่อสลับการแสดงผลขององค์ประกอบ
- ดูกราฟเวลาในการวาดภาพและพยายามหาองค์ประกอบที่เพิ่มเวลาในการวาดภาพ
- ตรวจสอบรูปแบบ CSS ขององค์ประกอบนั้น โดยเปิดและปิดรูปแบบขณะดูกราฟเพื่อหารูปแบบที่ทําให้ช้าลง
- เปลี่ยนสไตล์นี้และบันทึกไทม์ไลน์อีกครั้งเพื่อดูว่าหน้าเว็บมีประสิทธิภาพดีขึ้นหรือไม่
ภาพเคลื่อนไหวด้านล่างแสดงการเปลี่ยนสไตล์และผลกระทบต่อเวลาในการวาด
ตัวอย่างนี้แสดงให้เห็นว่าการปิดสไตล์ CSS อย่างใดอย่างหนึ่งระหว่าง box-shadow หรือ border-radius ช่วยลดเวลาในการวาดภาพได้อย่างมาก การใช้ทั้ง box-shadow และ border-radius ในองค์ประกอบหนึ่งๆ จะทําให้การดำเนินการวาดภาพมีค่าใช้จ่ายสูงมาก เนื่องจาก Chrome ไม่สามารถเพิ่มประสิทธิภาพสําหรับกรณีนี้ได้ ดังนั้น หากคุณมีองค์ประกอบที่ต้องมีการวาดภาพใหม่บ่อยครั้ง เช่น ในตัวอย่าง คุณควรหลีกเลี่ยงการผสมผสานนี้
หมายเหตุ
โหมดการวาดภาพต่อเนื่องจะวาดภาพหน้าเว็บที่มองเห็นทั้งหมดอีกครั้ง ซึ่งโดยปกติแล้วจะไม่เกิดขึ้นเมื่อเรียกดูหน้าเว็บ การเลื่อนมักจะวาดเฉพาะส่วนที่ไม่เคยแสดงมาก่อน และสำหรับการเปลี่ยนแปลงอื่นๆ ในหน้าเว็บ ระบบจะวาดเฉพาะบริเวณที่เล็กที่สุดเท่าที่จะเป็นไปได้ ดังนั้น ให้ตรวจสอบการบันทึกไทม์ไลน์อื่นเพื่อดูว่าการปรับปรุงสไตล์ส่งผลต่อเวลาในการแสดงผลของหน้าเว็บหรือไม่
เมื่อใช้ continuous painting mode คุณอาจพบว่าสไตล์ CSS border-radius และ box-shadow เพิ่มเวลาในการวาดภาพเป็นอย่างมาก เราไม่แนะนำให้คุณเลิกใช้ฟีเจอร์เหล่านี้ ฟีเจอร์เหล่านี้ยอดเยี่ยมมากและเรายินดีที่ฟีเจอร์เหล่านี้พร้อมให้บริการแล้ว แต่สิ่งสำคัญคือต้องรู้ว่าควรใช้เมื่อใดและที่ไหน
หลีกเลี่ยงการใช้ในบริเวณที่มีการทาสีใหม่บ่อยๆ และหลีกเลี่ยงการใช้มากเกินไปโดยทั่วไป
การสาธิตการใช้งานแบบสด
คลิกด้านล่างเพื่อดูการสาธิตที่ Paul Irish ใช้การวาดภาพต่อเนื่องเพื่อระบุการดำเนินการวาดภาพที่แพงมาก