ประสิทธิภาพ: คุณสมบัติที่แปลงได้เทียบกับคุณสมบัติที่ต้องวาดใหม่

เบราว์เซอร์แสดงผลในสามขั้นตอน ได้แก่ การจัดวาง (ขนาดและตำแหน่ง) → การวาด (พิกเซล) → การประกอบ (การรวมชั้นของ GPU) การทำแอนิเมชันให้คุณสมบัติที่ทำให้เกิดขั้นตอนก่อนหน้านั้นใช้ทรัพยากรมาก

การเปลี่ยนแปลงคุณสมบัติเหล่านี้บังคับให้เบราว์เซอร์คำนวณการจัดวางใหม่ ซึ่งอาจครอบคลุมทั้งหน้า หลีกเลี่ยงการทำแอนิเมชันให้คุณสมบัติเหล่านี้:

• width, height
• margin, padding
• top, left
• font-size
• display

คุณสมบัติเหล่านี้ข้ามการจัดวาง แต่ต้องวาดพิกเซลใหม่ จึงใช้ทรัพยากรในระดับปานกลาง:

• background-color
• color
• box-shadow
• border

คุณสมบัติเหล่านี้ข้ามทั้งการจัดวางและการวาด เบราว์เซอร์จึงต้องประกอบเฉพาะชั้นที่แปลงเป็นพิกเซลไว้ล่วงหน้าเท่านั้น ใช้ทรัพยากรน้อยมากและเร่งด้วย GPU:

• transform
• opacity

สำหรับแอนิเมชัน 60 เฟรมต่อวินาทีที่ลื่นไหล ให้ทำแอนิเมชันเฉพาะ transform และ opacity เท่านั้น ใช้ transform: translate() แทน top/left และใช้ opacity แทนการค่อย ๆ ปรากฏหรือหายไปด้วย display

will-change บอกให้เบราว์เซอร์เลื่อนองค์ประกอบขึ้นไปอยู่บนชั้น GPU ของตนเอง ก่อน ที่แอนิเมชันจะเริ่ม เพื่อป้องกัน "การกะพริบจากการเลื่อนชั้น" ระหว่างแอนิเมชัน

ตั้งค่า will-change: auto หรือลบคุณสมบัตินี้ออกทั้งหมดเมื่อแอนิเมชันเสร็จสิ้น การเลื่อนองค์ประกอบขึ้นชั้น GPU มากเกินไปจะทำให้หน่วยความจำ GPU สูญเปล่า

ใช้แท็บ ประสิทธิภาพของ DevTools ในเบราว์เซอร์โครมเพื่อบันทึกและตรวจสอบเวลาในแต่ละเฟรม แท็บ การแสดงผลสามารถเปิดการแสดงการวาดใหม่เป็นแสงกะพริบ ซึ่งจะแสดงด้วยการซ้อนสีเขียวว่าองค์ประกอบใดถูกวาดใหม่ในแต่ละเฟรม

การปรับปรุงที่ส่งผลมากที่สุดคือแทนที่แอนิเมชันตำแหน่งด้วยการแปลง:

การเปลี่ยนสีพื้นหลังทำให้เกิดการวาดใหม่ แต่ไม่ทำให้เกิดการจัดวางใหม่ จึงเหมาะสมสำหรับองค์ประกอบขนาดเล็ก สำหรับพื้นหลังขนาดใหญ่ ให้พิจารณาใช้องค์ประกอบเทียมที่มีการเปลี่ยนค่าความทึบแสงแทน:

คุณสมบัติ contain บอกเป็นนัยแก่เบราว์เซอร์ว่าองค์ประกอบและโครงสร้างย่อยขององค์ประกอบนั้นเป็นอิสระต่อกัน วิธีนี้จำกัดขอบเขตที่ต้องตรวจสอบการจัดวางใหม่ จึงช่วยเพิ่มประสิทธิภาพการวาดใหม่

คุณสมบัติ CSS สองรายการใดที่สามารถทำแอนิเมชันในขั้นการประกอบได้โดยไม่ทำให้เกิดการจัดวางหรือการวาด

การทำแอนิเมชันให้คุณสมบัติการจัดวาง (ความกว้าง ด้านบน ระยะขอบ) ทำให้ต้องคำนวณใหม่ซึ่งใช้ทรัพยากรมาก คุณสมบัติการวาด (สี พื้นหลัง) ใช้ทรัพยากรน้อยกว่า มีเพียง transform และ opacity ที่ทำแอนิเมชันในขั้นการประกอบของ GPU ได้โดยไม่ทำให้เกิดการจัดวางหรือการวาด ควรเลือกใช้คุณสมบัติเหล่านี้เสมอเพื่อให้แอนิเมชันลื่นไหลและมีประสิทธิภาพ