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