การแสดงผลเป็นขั้นตอนการเติมพิกเซลที่จะนำไปประกอบผู้ใช้ หน้าจอ โดยทั่วไปแล้วมักเป็นงานทั้งหมดในไปป์ไลน์ที่ใช้เวลานานที่สุด และเป็นงานที่ต้องหลีกเลี่ยงหากทำได้
สี คือขั้นตอนการเติมพิกเซลที่จะนำไปประกอบเป็น ผู้ใช้ หน้าจอ ซึ่งมักจะเป็นงานทั้งหมดที่ดำเนินการมานานที่สุดใน และควรหลีกเลี่ยงหากเป็นไปได้
สรุป
- การเปลี่ยนคุณสมบัตินอกเหนือจากการเปลี่ยนรูปแบบหรือความทึบแสงจะทริกเกอร์การแสดงผลเสมอ
- สีมักเป็นส่วนที่แพงที่สุดในไปป์ไลน์พิกเซล ให้หลีกเลี่ยงในที่ที่ทำได้
- ลดพื้นที่ที่ทำสีผ่านการเลื่อนเลเยอร์และจัดกลุ่มภาพเคลื่อนไหว
- ใช้เครื่องมือสร้างโปรไฟล์สีของ Chrome DevTools เพื่อประเมินความซับซ้อนและต้นทุนของสี ลดจุดที่ทำได้
การทริกเกอร์เลย์เอาต์และสี
หากคุณทริกเกอร์เลย์เอาต์จะทริกเกอร์การแสดงผลเสมอ เนื่องจากการเปลี่ยนเรขาคณิตขององค์ประกอบใดก็ตามหมายความว่าพิกเซลขององค์ประกอบจะต้องได้รับการแก้ไข
และยังทริกเกอร์สีได้ด้วยหากเปลี่ยนคุณสมบัติที่ไม่ใช่รูปทรงเรขาคณิต เช่น พื้นหลัง สีข้อความ หรือเงา ในกรณีเหล่านั้นจะไม่จำเป็นต้องใช้เลย์เอาต์และไปป์ไลน์จะมีลักษณะดังนี้
ใช้เครื่องมือสำหรับนักพัฒนาเว็บใน 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);
}
อย่างไรก็ตาม ต้องไม่สร้างเลเยอร์มากเกินไป เนื่องจากแต่ละเลเยอร์ต้องใช้ทั้งหน่วยความจำและการจัดการ คุณสามารถดูข้อมูลเพิ่มเติมได้ในส่วนทำตามพร็อพเพอร์ตี้ที่ใช้เฉพาะเครื่องมือทำ Composite เท่านั้นและจัดการจำนวนเลเยอร์
หากคุณได้โปรโมตองค์ประกอบเป็นเลเยอร์ใหม่ ให้ใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อยืนยันว่าการทำเช่นนั้นให้ประโยชน์ด้านประสิทธิภาพแก่คุณ อย่าโปรโมตองค์ประกอบโดยไม่ได้ทำโปรไฟล์
ลดพื้นที่สี
อย่างไรก็ตาม บางครั้งแม้จะมีการส่งเสริมองค์ประกอบต่างๆ งานสีก็ยังเป็นสิ่งจำเป็น ปัญหาใหญ่ของปัญหาสีคือเบราว์เซอร์รวมพื้นที่ 2 ส่วนที่จำเป็นต้องลงสีเข้าด้วยกัน และอาจส่งผลให้ทั้งหน้าจอสีใหม่ ตัวอย่างเช่น หากคุณมีส่วนหัวคงที่ที่ด้านบนของหน้า และมีการทาสีบางอย่างไว้ที่ด้านล่างของหน้าจอ ทั้งหน้าจออาจกลายเป็นทาสีใหม่หมด
การลดพื้นที่สีมักเป็นการจัดองค์ประกอบภาพเคลื่อนไหวและการเปลี่ยนภาพให้ไม่ซ้อนทับกันมากนัก หรือหาวิธีหลีกเลี่ยงการเคลื่อนไหวบางส่วนของหน้าเว็บ
ลดความซับซ้อนของสี
เมื่อพูดถึงการวาดภาพ บางสิ่งบางอย่างมีราคาแพงกว่าผลงานอื่นๆ ตัวอย่างเช่น อะไรก็ตามที่เกี่ยวข้องกับการเบลอ (เช่น เงา) จะใช้เวลาในการวาดภาพนานกว่าการวาดกล่องสีแดง แต่ในด้านของ CSS ก็ไม่บ่อยนักเพราะ background: red; และ box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); ไม่ได้ดูเหมือนมีลักษณะประสิทธิภาพที่ต่างกันโดยสิ้นเชิง แต่ก็เป็นเช่นนั้น
เครื่องมือสร้างโปรไฟล์สีด้านบนจะช่วยให้คุณพิจารณาว่าคุณต้องหาวิธีอื่นๆ ในการสร้างเอฟเฟกต์หรือไม่ ลองถามตัวเองว่าสามารถใช้ชุดสไตล์ที่ถูกกว่าหรือวิธีการอื่นๆ เพื่อให้ได้ผลลัพธ์ดีที่สุดหรือไม่
คุณควรหลีกเลี่ยงการลงสีในระหว่างภาพเคลื่อนไหวอยู่เสมอ เนื่องจาก 10 มิลลิวินาทีที่คุณมีต่อเฟรมมักไม่นานพอที่จะทำงานสี โดยเฉพาะบนอุปกรณ์เคลื่อนที่