คู่มือนี้จะสอนวิธีสร้างภาพเคลื่อนไหว CSS ประสิทธิภาพสูง
ดูทำไมภาพเคลื่อนไหวบางภาพจึงทำงานช้า เพื่อเรียนรู้ทฤษฎีเบื้องหลังคำแนะนำเหล่านี้
ความเข้ากันได้กับเบราว์เซอร์
คุณสมบัติ CSS ทั้งหมดที่แนะนำในคู่มือนี้สามารถรองรับการใช้งานข้ามเบราว์เซอร์ได้เป็นอย่างดี
ย้ายองค์ประกอบ
หากต้องการย้ายองค์ประกอบ ให้ใช้ค่าคีย์เวิร์ด translate
หรือ rotation
ของพร็อพเพอร์ตี้ transform
เช่น หากต้องการเลื่อนรายการขึ้นมาในมุมมอง ให้ใช้ translate
.animate {
animation: slide-in 0.7s both;
}
@keyframes slide-in {
0% {
transform: translateY(-1000px);
}
100% {
transform: translateY(0);
}
}
รายการสามารถหมุนได้เช่นกัน ตามตัวอย่างด้านล่าง 360 องศา
.animate {
animation: rotate 0.7s ease-in-out both;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
ปรับขนาดองค์ประกอบ
หากต้องการปรับขนาดองค์ประกอบ ให้ใช้ค่าคีย์เวิร์ด scale
ของพร็อพเพอร์ตี้ transform
.animate {
animation: scale 1.5s both;
}
@keyframes scale {
50% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
เปลี่ยนการเปิดเผยองค์ประกอบ
หากต้องการแสดงหรือซ่อนองค์ประกอบ ให้ใช้ opacity
.animate {
animation: opacity 2.5s both;
}
@keyframes opacity {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
หลีกเลี่ยงที่พักที่ทำให้เลย์เอาต์หรือ Paint แสดง
ก่อนใช้พร็อพเพอร์ตี้ CSS สำหรับภาพเคลื่อนไหว (นอกเหนือจาก transform
และ opacity
) ให้ระบุผลกระทบของพร็อพเพอร์ตี้ต่อไปป์ไลน์การแสดงผล
หลีกเลี่ยงพร็อพเพอร์ตี้ที่ทำให้เกิดเลย์เอาต์หรือสี เว้นแต่จะมีความจำเป็นอย่างยิ่ง
บังคับสร้างเลเยอร์
ตามที่อธิบายไว้ในทำไมภาพเคลื่อนไหวบางภาพจึงทำงานช้า การวางองค์ประกอบในเลเยอร์ใหม่จะทำให้สามารถทาสีองค์ประกอบเดิมใหม่ได้โดยไม่ต้องทาสีเค้าโครงที่เหลือใหม่ด้วย
เบราว์เซอร์มักจะตัดสินใจได้ดีขึ้นว่าควรวางรายการใดบนเลเยอร์ใหม่ แต่คุณบังคับให้สร้างเลเยอร์ด้วยตนเองโดยใช้พร็อพเพอร์ตี้ will-change
ได้
คุณสมบัตินี้จะบอกให้เบราว์เซอร์ทราบว่าองค์ประกอบนี้จะมีการเปลี่ยนแปลงในทางใดทางหนึ่งตามชื่อเรียก
ใน CSS คุณสมบัตินี้จะใช้กับตัวเลือกใดก็ได้ดังนี้
body > .sidebar {
will-change: transform;
}
อย่างไรก็ตาม ข้อกำหนดแนะนำว่าคุณควรใช้วิธีนี้สำหรับองค์ประกอบที่จะเปลี่ยนแปลงอยู่เสมอ
ซึ่งหากตัวอย่างข้างต้นเป็นแถบด้านข้างที่ผู้ใช้สามารถเลื่อนเข้าและออก ก็อาจเป็นกรณีนี้
มีบางรายการในหน้าเว็บที่ไม่เปลี่ยนแปลงบ่อย ดังนั้นขอแนะนำให้ใช้ will-change
โดยใช้ JavaScript ในจุดที่มีแนวโน้มว่าจะเกิดการเปลี่ยนแปลง
คุณต้องให้เวลาเบราว์เซอร์อย่างเพียงพอเพื่อเพิ่มประสิทธิภาพที่จำเป็น
จากนั้นจึงนำพร็อพเพอร์ตี้ออกเมื่อหยุดการเปลี่ยนแปลง
หากต้องการวิธีบังคับให้สร้างเลเยอร์ในเบราว์เซอร์หายากที่ไม่รองรับ will-change
(ซึ่งน่าจะเป็น Internet Explorer ในตอนนี้) คุณสามารถตั้งค่า transform: translateZ(0)
แก้ไขข้อบกพร่องของภาพเคลื่อนไหวที่ช้าหรือคุณภาพไม่ดี
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome และ Firefox DevTools มีเครื่องมือมากมายที่จะช่วยให้คุณทราบสาเหตุที่ภาพเคลื่อนไหวช้าหรือไม่เสถียร
ตรวจสอบว่าภาพเคลื่อนไหวทริกเกอร์เลย์เอาต์หรือไม่
ภาพเคลื่อนไหวที่ย้ายองค์ประกอบโดยใช้สิ่งอื่นที่ไม่ใช่ transform
มักจะทำได้ช้า
ในตัวอย่างต่อไปนี้ เราได้รับผลลัพธ์ภาพเดียวกันที่เป็นภาพเคลื่อนไหวของ top
และ left
และการใช้ transform
.box { position: absolute; top: 10px; left: 10px; animation: move 3s ease infinite; } @keyframes move { 50% { top: calc(90vh - 160px); left: calc(90vw - 200px); } }
.box { position: absolute; top: 10px; left: 10px; animation: move 3s ease infinite; } @keyframes move { 50% { transform: translate(calc(90vw - 200px), calc(90vh - 160px)); } }
โดยคุณจะทดสอบกลยุทธ์นี้ได้ในตัวอย่าง Glitch 2 รายการต่อไปนี้ และสำรวจประสิทธิภาพโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บ
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- เปิดแผงประสิทธิภาพ
- บันทึกประสิทธิภาพของรันไทม์ ขณะที่ภาพเคลื่อนไหวกำลังเกิดขึ้น
- ตรวจสอบแท็บสรุป
หากคุณเห็นค่าการแสดงผลที่ไม่ใช่ 0 ในแท็บสรุป อาจหมายความว่าภาพเคลื่อนไหวทำให้เบราว์เซอร์ทำงานเลย์เอาต์
เครื่องมือสำหรับนักพัฒนาเว็บใน Firefox
ใน Firefox DevTools Waterfall จะช่วยให้คุณเข้าใจว่าเบราว์เซอร์ใช้เวลาไปกับส่วนใดบ้าง
- เปิดแผงประสิทธิภาพ
- ในแผง "เริ่มบันทึกประสิทธิภาพ" ขณะที่ภาพเคลื่อนไหวของคุณกำลังดำเนินอยู่
- หยุดการบันทึกและตรวจสอบแท็บ Waterfall
หากคุณเห็นรายการสำหรับคำนวณรูปแบบอีกครั้ง แสดงว่าเบราว์เซอร์ต้องเริ่มต้นที่Waterfall การแสดงผล
ตรวจสอบว่าภาพเคลื่อนไหวลดเฟรมหรือไม่
- เปิดแท็บการแสดงผลของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome
- เปิดใช้ช่องทำเครื่องหมายเครื่องวัด FPS
- ดูค่าขณะที่ภาพเคลื่อนไหวทำงาน
ที่ด้านบนของ UI ของเครื่องวัด FPS คุณจะเห็นป้ายกำกับเฟรม ด้านล่างนี้ คุณจะเห็นค่าในบรรทัดของ 50% 1 (938 m) dropped of 1878
ภาพเคลื่อนไหวที่มีประสิทธิภาพสูงจะมีเปอร์เซ็นต์สูง เช่น 99%
เปอร์เซ็นต์ที่สูงหมายความว่ามีเฟรมหลุดน้อยและภาพเคลื่อนไหวจะดูลื่นไหล
ตรวจสอบว่าภาพเคลื่อนไหวทริกเกอร์สีหรือไม่
เมื่อพูดถึงการทาสี บางอย่างก็แพงกว่าของอย่างอื่น
เช่น อะไรก็ตามที่เกี่ยวข้องกับการเบลอ (เช่น เงา) จะใช้เวลานานกว่าการวาดกล่องสีแดง
อย่างไรก็ตาม สำหรับ CSS นั้นไม่ชัดเจนเสมอไปว่า background: red;
และ box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5);
ไม่จำเป็นต้องมีลักษณะด้านประสิทธิภาพที่แตกต่างกันโดยสิ้นเชิง
เครื่องมือสำหรับนักพัฒนาเว็บจะช่วยคุณระบุจุดที่ต้องทาสีใหม่ และปัญหาด้านประสิทธิภาพที่เกี่ยวข้องกับการทาสี
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
- เปิดแท็บการแสดงผลของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome
- เลือกการกะพริบเพนท์
- เลื่อนเคอร์เซอร์ไปรอบๆ หน้าจอ
ถ้าคุณเห็นทั้งหน้าจอกะพริบ หรือส่วนที่คุณคิดว่าไม่ควรเปลี่ยนคือไฮไลต์ ก็ให้ลองตรวจสอบดู
หากต้องการเจาะลึกว่าพร็อพเพอร์ตี้หนึ่งๆ ทำให้เกิดปัญหาด้านประสิทธิภาพที่เกิดจากการทาสีหรือไม่ เครื่องมือสร้างโปรไฟล์สีในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยคุณได้
เครื่องมือสำหรับนักพัฒนาเว็บใน Firefox
- เปิดการตั้งค่าและเพิ่มปุ่มกล่องเครื่องมือสำหรับสลับการกะพริบเพนท์
- ในหน้าเว็บที่ต้องการตรวจสอบ ให้สลับปุ่มเป็นเปิดและเลื่อนเมาส์ หรือเลื่อนเพื่อดูพื้นที่ที่ไฮไลต์
บทสรุป
หากเป็นไปได้ ให้จำกัดภาพเคลื่อนไหวไว้ที่ opacity
และ transform
เพื่อให้ภาพเคลื่อนไหวอยู่ในขั้นการประกอบภาพของเส้นทางการแสดงผล
ใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อตรวจสอบว่าภาพเคลื่อนไหวส่งผลต่อระยะใดของเส้นทาง
ใช้เครื่องมือสร้างโปรไฟล์สีเพื่อดูว่าการทำสีมีราคาแพงเป็นพิเศษหรือไม่ หากคุณพบสิ่งต่างๆ ให้ดูว่า พร็อพเพอร์ตี้ CSS อื่นจะให้รูปลักษณ์แบบเดียวกันและมีประสิทธิภาพที่ดีขึ้นหรือไม่
ใช้พร็อพเพอร์ตี้ will-change
อย่างจำกัดและเฉพาะเมื่อคุณพบปัญหาด้านประสิทธิภาพ