โหมดการวาดภาพแบบต่อเนื่องสำหรับการสร้างโปรไฟล์สีพร้อมใช้งานแล้วใน Chrome Canary บทความนี้จะอธิบายวิธีระบุปัญหาเวลาในการวาดหน้าเว็บและวิธีใช้เครื่องมือใหม่นี้เพื่อตรวจหาจุดคอขวดในประสิทธิภาพการวาดภาพ
การตรวจสอบระยะเวลาการวาดภาพในหน้าเว็บของคุณ
คุณจึงสังเกตเห็นว่าหน้าเว็บได้เลื่อนได้ไม่ราบรื่น นี่คือวิธีที่คุณจะเริ่ม จัดการกับปัญหา สำหรับตัวอย่าง เราจะใช้หน้าสาธิต Things We Left On The Moon โดย Dan Cederholm
คุณเปิดเครื่องมือตรวจสอบเว็บ เริ่มการบันทึกไทม์ไลน์ และเลื่อนหน้าเว็บขึ้นและลง จากนั้นดูที่ไทม์ไลน์แนวตั้ง ซึ่งจะแสดงสิ่งที่เกิดขึ้นในแต่ละเฟรม
หากคุณเห็นเวลาส่วนใหญ่ในการวาดภาพ (แถบสีเขียวขนาดใหญ่สูงกว่า 60 เฟรมต่อวินาที) คุณต้องตรวจสอบอย่างละเอียดว่าทำไมจึงเป็นเช่นนั้น หากต้องการตรวจสอบสี ให้ใช้การตั้งค่าแสดงสี่เหลี่ยมสีของเครื่องมือตรวจสอบเว็บ (ไอคอนฟันเฟืองที่มุมขวาล่างของเครื่องมือตรวจสอบเว็บ) ซึ่งจะแสดงภูมิภาคที่ใช้สี Chrome
สาเหตุที่ทำให้ Chrome แสดงผลส่วนต่างๆ ของหน้าเว็บใหม่มีดังนี้
- โหนด DOM มีการเปลี่ยนแปลงใน JavaScript ซึ่งทำให้ Chrome คำนวณเลย์เอาต์ของหน้าเว็บใหม่
- ภาพเคลื่อนไหวกำลังเล่นที่จะอัปเดตในรอบตามเฟรม
- การโต้ตอบของผู้ใช้ เช่น การวางเมาส์ ทำให้เกิดการเปลี่ยนแปลงรูปแบบในองค์ประกอบบางอย่าง
- การดำเนินการอื่นๆ ที่ทำให้เลย์เอาต์หน้าเว็บเปลี่ยนแปลง
ในฐานะนักพัฒนาซอฟต์แวร์ คุณต้องตระหนักถึงการแสดงผลซ้ำที่เกิดขึ้นบนหน้าเว็บของคุณ
การดูกรอบสี่เหลี่ยมสีก็เป็นวิธีที่ดี ในตัวอย่างภาพหน้าจอด้านบน คุณจะเห็นว่าทั้งหน้าจอมีการวาดรูปสี่เหลี่ยมผืนผ้าสำหรับวาดรูปขนาดใหญ่ แบบนี้หมายความว่าทั้งหน้าจอมีการทาสีใหม่ขณะที่คุณเลื่อน ซึ่งไม่ใช่เรื่องดี ในกรณีเฉพาะนี้ ปัญหานี้เกิดจากสไตล์ CSS
background-attachment:fixed ซึ่งทำให้ภาพพื้นหลังของหน้าอยู่ในตำแหน่งเดิมในขณะที่เนื้อหาในหน้าเลื่อนขึ้นไปด้านบนขณะที่คุณเลื่อน
หากคุณพบว่าภาพใหม่ครอบคลุมพื้นที่ขนาดใหญ่และ/หรือใช้เวลานาน คุณมี 2 ทางเลือกดังนี้
- คุณสามารถลองเปลี่ยนเลย์เอาต์ของหน้าเพื่อลดปริมาณภาพวาด หากเป็นไปได้ Chrome จะทาสีหน้าที่มองเห็นได้เพียงครั้งเดียวและเพิ่มส่วนที่มองไม่เห็นขณะที่คุณเลื่อนลง อย่างไรก็ตาม ในบางกรณี Chrome จำเป็นต้องแสดงผลใหม่ในบางพื้นที่ เช่น กฎ CSS
position:fixedซึ่งมักใช้กับองค์ประกอบการนำทางที่อยู่ในตำแหน่งเดิมอาจทำให้เกิดการวาดใหม่ - หากคุณต้องการรักษาเลย์เอาต์ของหน้าเว็บไว้ ให้ลองลดค่าใช้จ่ายในการทาสีพื้นที่ที่ได้รับการทาสีใหม่ สไตล์ CSS แต่ละแบบมีค่าใช้จ่ายในการทาสีไม่เท่ากัน บางสไตล์มีผลกระทบน้อย และบางรูปแบบก็สำคัญมาก การคิดต้นทุนในการทาสีบางรูปแบบอาจเป็นงานหนัก ซึ่งทำได้โดยสลับรูปแบบในแผงองค์ประกอบ แล้วดูความแตกต่างของการบันทึกไทม์ไลน์ ซึ่งหมายถึงการสลับระหว่างแผงต่างๆ กับการบันทึกจำนวนมาก และนี่คือที่มาของโหมดการวาดภาพแบบต่อเนื่อง
โหมดการวาดภาพแบบต่อเนื่อง
โหมดการวาดภาพแบบต่อเนื่องเป็นเครื่องมือที่ช่วยคุณระบุว่าองค์ประกอบใดมีค่าใช้จ่ายในหน้าเว็บ ทำให้หน้ามีสภาพการทาสีใหม่อยู่เสมอ ซึ่งแสดงตัวนับว่ากำลังมีงานทาสีมากเพียงใด จากนั้นคุณสามารถซ่อนองค์ประกอบและเปลี่ยนสไตล์ คอยดูตัวนับ เพื่อดูว่าแบบใดทำงานช้า
การตั้งค่า
หากต้องการใช้โหมดการวาดภาพแบบต่อเนื่อง คุณต้องใช้ Chrome Canary
ในระบบ Linux (และ Mac บางรุ่น) คุณต้องตรวจสอบว่า Chrome ทำงานในโหมดจัดวางองค์ประกอบ ซึ่งจะสามารถเปิดใช้งานได้อย่างถาวรโดยใช้การตั้งค่า GPU การประสานในทุกหน้า ใน 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 ทำให้ต้องใช้เวลาในการลงสีมากขึ้น เราไม่แนะนำฟีเจอร์ดังกล่าวโดยทั่วไป ฟีเจอร์ดังกล่าวยอดเยี่ยมมาก และเราก็ยินดีเป็นอย่างยิ่งที่ได้มาอยู่ที่นี่แล้ว แต่คุณควรทราบว่าควรใช้เมื่อใดและที่ไหน
หลีกเลี่ยงการใช้สีเหล่านั้นในบริเวณที่มีสีวาดใหม่จำนวนมากและหลีกเลี่ยงการใช้สีเหล่านี้มากเกินไปโดยทั่วไป
การสาธิตสด
คลิกด้านล่างเพื่อดูการสาธิตที่พอล ไอริชใช้การวาดภาพอย่างต่อเนื่องเพื่อระบุการวาดภาพที่มีราคาแพงอย่างไม่เหมือนใคร