Paint คือขั้นตอนการเติมพิกเซลที่จะทำการ Composite ในหน้าจอของผู้ใช้ในท้ายที่สุด ซึ่งมักใช้เวลานานที่สุดในการดำเนินงานทั้งหมดในกระบวนการทำงาน และ 1 งานที่ควรหลีกเลี่ยงหากทำได้
การแสดงผลเป็นขั้นตอนการเติมพิกเซลที่จะทำการ Composite ในหน้าจอของผู้ใช้ในท้ายที่สุด งานทั้งหมดในไปป์ไลน์มักใช้เวลานานที่สุดในไปป์ไลน์ และเป็นงานที่ต้องหลีกเลี่ยงหากทำได้
สรุป
- การเปลี่ยนคุณสมบัตินอกเหนือจากการเปลี่ยนรูปแบบหรือความทึบแสงจะทําให้เกิดการแสดงผลเสมอ
- สีมักจะเป็นส่วนที่แพงที่สุดของไปป์ไลน์พิกเซล ควรหลีกเลี่ยงบริเวณที่ทำได้
- ลดพื้นที่สำหรับทาสีด้วยการโปรโมตเลเยอร์และการจัดภาพเคลื่อนไหวเป็นกลุ่ม
- ใช้เครื่องมือสร้างโปรไฟล์ Paint ของ Chrome DevTools เพื่อประเมินความซับซ้อนและต้นทุนของสี เพื่อลดจุดที่ทำได้
การทริกเกอร์เลย์เอาต์และสี
หากทริกเกอร์เลย์เอาต์ คุณจะทริกเกอร์ Paint เสมอ เนื่องจากการเปลี่ยนเรขาคณิตขององค์ประกอบหมายความว่าต้องแก้ไขพิกเซลขององค์ประกอบ
คุณยังเรียกใช้ Paint ได้ด้วยหากเปลี่ยนคุณสมบัติที่ไม่ใช่เรขาคณิต เช่น พื้นหลัง สีข้อความ หรือเงา ในกรณีเช่นนี้ คุณไม่จำเป็นต้องใช้เลย์เอาต์และไปป์ไลน์จะมีลักษณะเช่นนี้
ใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อระบุจุดคอขวดของสีได้อย่างรวดเร็ว
คุณใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อระบุพื้นที่ที่มีการทาสีได้อย่างรวดเร็ว เปิดแท็บการแสดงผล แล้วเปิดใช้ Paint Flashing
เมื่อเปิดตัวเลือกนี้ Chrome หน้าจอจะกะพริบเป็นสีเขียวเมื่อใดก็ตามที่มีการทาสี หากคุณเห็นหน้าจอทั้งหน้าจอเป็นสีเขียวหรือสว่างวาบหรือบริเวณบางส่วนของหน้าจอที่คุณคิดว่าไม่ควรทาสี คุณควรลองเพิ่มอีกเล็กน้อย
ส่งเสริมองค์ประกอบที่เคลื่อนไหวหรือจางลง
การลงสีไม่ได้สร้างเป็นภาพเดียวในความทรงจําเสมอไป อันที่จริง เบราว์เซอร์สามารถลงสีลงในรูปภาพหลายภาพ หรือเลเยอร์ตัวจัดวางองค์ประกอบได้ หากจำเป็น
ประโยชน์ของวิธีนี้คือคุณสามารถจัดการองค์ประกอบที่ทาสีใหม่เป็นประจำหรือเคลื่อนไหวบนหน้าจอที่มีการเปลี่ยนรูปแบบได้โดยไม่ส่งผลต่อองค์ประกอบอื่นๆ เช่นเดียวกับแพ็กเกจงานศิลปะ เช่น Sketch, GIMP หรือ Photoshop ซึ่งสามารถจัดการและประกอบเลเยอร์แต่ละเลเยอร์ทับกันเพื่อสร้างภาพสุดท้าย
วิธีที่ดีที่สุดในการสร้างเลเยอร์ใหม่คือการใช้คุณสมบัติ CSS will-change ซึ่งจะทำงานได้ใน Chrome, Opera และ Firefox และด้วยค่า transform จะเป็นการสร้างเลเยอร์ตัวประกอบใหม่:
.moving-element {
will-change: transform;
}
สำหรับเบราว์เซอร์ที่ไม่รองรับ will-change แต่ได้รับประโยชน์จากการสร้างเลเยอร์ เช่น Safari และ Safari บนอุปกรณ์เคลื่อนที่ คุณจะต้องใช้การเปลี่ยนรูปแบบ 3 มิติ (ไม่ถูกต้อง) เพื่อบังคับเลเยอร์ใหม่ โดยทำดังนี้
.moving-element {
transform: translateZ(0);
}
แต่อย่าสร้างเลเยอร์มากเกินไป เนื่องจากแต่ละเลเยอร์ต้องใช้ทั้งหน่วยความจำและการจัดการ คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในส่วนยึดคุณสมบัติตัวจัดวางองค์ประกอบเท่านั้นและจัดการจำนวนเลเยอร์
หากคุณโปรโมตองค์ประกอบไปยังเลเยอร์ใหม่ ให้ใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อยืนยันว่าการดำเนินการดังกล่าวทําให้คุณได้รับประโยชน์ด้านประสิทธิภาพ อย่าโปรโมตองค์ประกอบโดยไม่มีการทำโปรไฟล์
ลดพื้นที่ที่ทาสี
อย่างไรก็ตาม แม้ว่าบางครั้งจะมีการโปรโมตองค์ประกอบต่างๆ แต่การลงสียังจำเป็น ปัญหาใหญ่ของปัญหาเกี่ยวกับการลงสีคือเบราว์เซอร์จะรวมส่วน 2 ส่วนเข้าด้วยกันซึ่งต้องอาศัยการลงสี ซึ่งอาจส่งผลให้ทั้งหน้าจอมีการทาสีใหม่ ตัวอย่างเช่น หากคุณมีส่วนหัวที่ตายตัวที่ด้านบนของหน้า และมีบางอย่างวาดอยู่ที่ด้านล่างของหน้าจอ ทั้งหน้าจออาจถูกทาสีใหม่
การลดพื้นที่ที่ระบายสีมักเป็นการจัดองค์ประกอบภาพเคลื่อนไหวและการเปลี่ยนภาพไม่ให้ซ้อนทับกันมากนัก หรือการหาวิธีหลีกเลี่ยงการสร้างภาพเคลื่อนไหวจากบางส่วนของหน้าเว็บ
ลดความซับซ้อนของการแสดงผล
เมื่อพูดถึงการทาสี บางอย่างก็แพงกว่าของอย่างอื่น เช่น อะไรก็ตามที่เกี่ยวข้องกับการเบลอ (เช่น เงา) จะใช้เวลานานกว่าการวาดกล่องสีแดง สำหรับ CSS นั้นไม่ได้มีความชัดเจนเสมอไปเพราะ background: red; และ box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); ไม่ได้มีลักษณะประสิทธิภาพแตกต่างกันอย่างมาก แต่ก็มีเช่นกัน
เครื่องมือสร้างโปรไฟล์สีด้านบนจะช่วยให้คุณตัดสินใจได้ว่าต้องดูวิธีอื่นๆ ในการบรรลุเอฟเฟกต์หรือไม่ ลองถามตัวเองดูว่าสามารถใช้ชุดสไตล์ที่มีราคาถูกลงหรือวิธีอื่นๆ เพื่อให้ได้ผลลัพธ์สุดท้ายของคุณไหม
ที่ที่คุณอาจต้องการหลีกเลี่ยงการลงสีในระหว่างภาพเคลื่อนไหวโดยเฉพาะ เนื่องจากเวลา 10 มิลลิวินาทีต่อเฟรมนั้นโดยทั่วไปแล้วไม่ยาวพอที่จะทำงานระบายสี โดยเฉพาะบนอุปกรณ์เคลื่อนที่