TL;DR
ตั้งแต่ Chrome 53 เป็นต้นไป เนื้อหาทั้งหมดจะแรสเตอร์อีกครั้งเมื่อขนาดการเปลี่ยนรูปแบบมีการเปลี่ยนแปลง หากไม่มีพร็อพเพอร์ตี้ will-change: transform CSS กล่าวคือ will-change: transform หมายถึง "โปรดแสดงภาพเคลื่อนไหวเร็วๆ"
ตัวเลือกนี้ใช้กับการปรับขนาดการเปลี่ยนรูปแบบที่เกิดขึ้นผ่านการดัดแปลงสคริปต์เท่านั้น และไม่มีผลกับภาพเคลื่อนไหว CSS หรือภาพเคลื่อนไหวบนเว็บ
ซึ่งหมายความว่าเว็บไซต์ของคุณอาจมีเนื้อหาที่ดูดีขึ้น แต่อาจทำงานช้าลงหากไม่ทำการเปลี่ยนแปลงเล็กๆ น้อยๆ ที่ระบุไว้ด้านล่าง
ผลกระทบต่อนักพัฒนาเว็บ
ภายใต้การเปลี่ยนแปลงนี้ will-change: transform เปรียบเสมือนการบังคับให้เนื้อหาเปลี่ยนรูปแบบเป็นบิตแมปแบบคงที่ ซึ่งจะไม่เปลี่ยนแปลงอีกต่อไปภายใต้การอัปเดตการเปลี่ยนรูปแบบ ซึ่งช่วยให้นักพัฒนาแอปเพิ่มความเร็วของภาพเคลื่อนไหวการเปลี่ยนรูปแบบในบิตแมปนั้นได้ เช่น การเคลื่อนไหว การหมุน หรือการปรับขนาด
เราไม่แยกความแตกต่างระหว่างการเปลี่ยนรูปแบบการแปลและการเปลี่ยนรูปแบบมาตราส่วน
การดำเนินการที่แนะนำ
ใส่ will-change: transform บนองค์ประกอบเมื่อคุณต้องการความเร็วของภาพเคลื่อนไหวที่เปลี่ยนรูปแบบเร็วมาก (กล่าวคือ 60 fps) และคาดว่าการแรสเตอร์องค์ประกอบที่มีคุณภาพสูงในทุกเฟรมจะไม่เร็วพอ หรือหลีกเลี่ยง
will-change: transform
คุณอาจต้องเพิ่ม will-change:
transform เมื่อภาพเคลื่อนไหวเริ่มขึ้นและนำออกเมื่อภาพเคลื่อนไหวสิ้นสุดลง เพื่อเพิ่มประสิทธิภาพและคุณภาพให้เหมาะสม อย่างไรก็ตาม โปรดทราบว่าการเพิ่มหรือนําwill-change: transformออกมักจะมีต้นทุนด้านประสิทธิภาพแบบครั้งเดียวจํานวนมาก
ข้อควรพิจารณาเพิ่มเติมในการติดตั้งใช้งาน
การนํา will-change: transform ออกจะทำให้ระบบแรสเตอร์เนื้อหาอีกครั้งที่ขนาดที่คมชัด แต่เฉพาะในเฟรมภาพเคลื่อนไหวถัดไปเท่านั้น (ผ่าน requestAnimationFrame) ดังนั้น หากเลเยอร์มี will-change: transform อยู่และคุณต้องการเรียกใช้การแรสเตอร์ใหม่แต่ยังคงแสดงภาพเคลื่อนไหวต่อไป คุณต้องนำ will-change:
transform ออก แล้วเพิ่มกลับเข้าไปใหม่ใน requestAnimationFrame() callback
หากต้องการแรสเตอร์ที่ขนาดปัจจุบันในระหว่างที่ภาพเคลื่อนไหวแสดงอยู่ ให้ใช้เทคนิคข้างต้นเพื่อนำออกในเฟรมหนึ่ง แล้วเพิ่ม will-change:
transform อีกครั้งในเฟรมถัดไป
ซึ่งอาจส่งผลข้างเคียงคือเนื้อหาจะสูญเสียเลเยอร์คอมโพสิต ทำให้คําแนะนําข้างต้นมีราคาค่อนข้างสูง หากเป็นปัญหาดังกล่าว เราขอแนะนำให้เพิ่ม transform: translateZ(0) ลงในเนื้อหาด้วยเพื่อให้อยู่ในเลเยอร์คอมโพสิตระหว่างการดำเนินการนี้
สรุปผลกระทบ
การเปลี่ยนแปลงนี้ส่งผลต่อคุณภาพ ประสิทธิภาพ และการควบคุมเนื้อหาที่ผ่านการจัดการแสดงผลของนักพัฒนาแอป
- คุณภาพของเนื้อหาที่ผ่านการจัดการแสดงผล: เอาต์พุตที่ผ่านการจัดการแสดงผลขององค์ประกอบที่มีภาพเคลื่อนไหวจะปรับขนาดให้คมชัดเสมอโดยค่าเริ่มต้น
- ประสิทธิภาพ: การเปลี่ยนรูปแบบภาพเคลื่อนไหวเมื่อมี
will-change: transformจะรวดเร็ว - การควบคุมของนักพัฒนาแอป: นักพัฒนาแอปสามารถเลือกระหว่างคุณภาพกับความเร็ว โดยอิงตามองค์ประกอบและเฟรมภาพเคลื่อนไหวแต่ละเฟรมด้วยการเพิ่มและนำ
will-change: transformออก
ดูรายละเอียดเพิ่มเติมได้ในเอกสารการออกแบบที่ใช้อ้างอิงด้านบน
ตัวอย่าง
ในตัวอย่างนี้ องค์ประกอบที่มีรหัส remainsBlurry จะยังคงเบลอหลังจากการเปลี่ยนแปลงนี้ แต่องค์ประกอบที่มีรหัส noLongerBlurry จะคมชัดขึ้น เนื่องจากรายการแรกมีพร็อพเพอร์ตี้ will-
change: transform CSS
ตัวอย่างภาพเคลื่อนไหวการเปลี่ยนขนาดจากแอปพลิเคชันจริง
- จากข้อบกพร่องนี้: การซูมเสือ
- Google Maps บนอุปกรณ์เคลื่อนที่ (maps.google.com) - ซูมแผนที่
- Google Maps Lite บนเดสก์ท็อป
- แผนที่ที่นั่งของ Ticketmaster