will-change และการเลื่อนระดับเลเยอร์
แจ้งเบราว์เซอร์ให้เลื่อนองค์ประกอบไปยังเลเยอร์ของ GPU ด้วย will-change เพื่อให้ภาพเคลื่อนไหวลื่นไหลขึ้น
will-change และการเลื่อนระดับเลเยอร์ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
will-change คืออะไร
will-change เป็นคำแนะนำแก่เบราว์เซอร์ว่าองค์ประกอบกำลังจะมีการทำแอนิเมชัน ทำให้เบราว์เซอร์เตรียมการเพิ่มประสิทธิภาพไว้ล่วงหน้าได้ เช่น ย้ายองค์ประกอบไปยังเลเยอร์ตัวประกอบภาพของ GPU โดยเฉพาะก่อนเริ่มแอนิเมชัน
ไวยากรณ์
ระบุคุณสมบัติที่จะเปลี่ยนแปลง: will-change: transform, will-change: opacity, will-change: transform, opacity ใช้ will-change: auto เพื่อลบคำแนะนำเมื่อแอนิเมชันสิ้นสุด
ควรใช้เมื่อใด
ใช้ will-change เฉพาะกับองค์ประกอบที่จะทำแอนิเมชันจริง และใช้เฉพาะตลอดระยะเวลาของแอนิเมชันเท่านั้น การเพิ่มและลบคุณสมบัตินี้ด้วย JavaScript (ผ่านคลาส) มีประสิทธิภาพมากกว่าการปล่อยให้คุณสมบัตินี้คงอยู่ถาวรบนองค์ประกอบแบบคงที่
ต้นทุนของการสร้างเลเยอร์
ทุกเลเยอร์ที่ถูกย้ายไปยังเลเยอร์ตัวประกอบภาพจะใช้หน่วยความจำ GPU การย้ายองค์ประกอบจำนวนมากพร้อมกันทำให้เกิดแรงกดดันต่อหน่วยความจำ ซึ่งอาจลดประสิทธิภาพลง โดยเฉพาะบนอุปกรณ์เคลื่อนที่ที่มี GPU RAM จำกัด ควรย้ายองค์ประกอบเท่าที่จำเป็นและทำอย่างมีจุดประสงค์
การหลีกเลี่ยงการใช้แบบครอบคลุม
อย่าใช้ will-change กับ * หรือองค์ประกอบจำนวนมาก ต้นทุนของการเพิ่มประสิทธิภาพจะสูงกว่าประโยชน์เมื่อสร้างเลเยอร์มากเกินไป ควรวิเคราะห์ประสิทธิภาพก่อน และเพิ่ม will-change เฉพาะเมื่อยืนยันแล้วว่าปัญหาอาการกระตุกเกิดขึ้นในจุดนั้น
will-change เทียบกับเทคนิคการแปลงแกน Z
ก่อนมี will-change นักพัฒนาใช้ transform: translateZ(0) หรือ translate3d(0,0,0) เพื่อบังคับให้องค์ประกอบถูกย้ายไปยัง GPU will-change เป็นแนวทางที่เหมาะสมและสื่อความหมายตามหลักการ ส่วนเทคนิคการแปลงแกน Z ยังคงใช้งานได้ แต่เป็นรายละเอียดการนำไปใช้ ไม่ใช่การสื่อเจตนา
ผลข้างเคียงของบริบทการซ้อนทับ
เลเยอร์ที่ถูกย้ายไปยังตัวประกอบภาพจะสร้างบริบทการซ้อนทับใหม่ ซึ่งส่งผลต่อพฤติกรรมของลำดับการซ้อนทับ องค์ประกอบลูกขององค์ประกอบที่ถูกย้ายจะถูกจัดลำดับโดยอ้างอิงจากองค์ประกอบนั้น ไม่ใช่จากรากของเอกสาร โปรดตระหนักถึงการเปลี่ยนแปลงของบริบทการซ้อนทับเมื่อย้ายองค์ประกอบ
รูปแบบการใช้งานแบบไดนามิก
เพิ่ม will-change เมื่อเกิด mouseenter หรือเมื่อเริ่มแอนิเมชัน แล้วลบออกเมื่อเกิด mouseleave หรือเมื่อแอนิเมชันสิ้นสุด วิธีนี้ช่วยให้เบราว์เซอร์มีเวลาเตรียมการ โดยไม่ใช้หน่วยความจำ GPU อย่างถาวรกับองค์ประกอบที่ไม่ได้ทำงาน
<pre class="snippet">el.addEventListener("mouseenter", () => el.style.willChange = "transform");
el.addEventListener("mouseleave", () => el.style.willChange = "auto");</pre>การวิเคราะห์จำนวนเลเยอร์
Chrome DevTools → แผงเลเยอร์จะแสดงภาพของเลเยอร์ที่ถูกย้ายไปยังตัวประกอบภาพ จำนวนเลเยอร์ที่สูงมาก เช่น หลายร้อยเลเยอร์ บ่งบอกว่ามีการย้ายเลเยอร์มากเกินไป ส่วนหน่วยความจำจะแสดงการใช้หน่วยความจำ GPU ควรรักษาจำนวนเลเยอร์ที่ถูกย้ายให้ต่ำที่สุด และตรวจสอบบนโปรไฟล์อุปกรณ์ประสิทธิภาพต่ำ
ทางเลือกด้วยคุณสมบัติการจำกัดขอบเขต
CSS contain: layout paint จะจำกัดการคำนวณการจัดวางและการวาดไว้ภายในต้นไม้ย่อย คล้ายกับการแยกออกจากกัน วิธีนี้ช่วยเพิ่มประสิทธิภาพให้วิดเจ็ตที่ทำงานได้ในตัวเองโดยไม่สร้างเลเยอร์ GPU จึงเป็นการเพิ่มประสิทธิภาพที่มีต้นทุนต่ำกว่า will-change สำหรับองค์ประกอบที่ไม่มีแอนิเมชัน
การรองรับและพฤติกรรมของเบราว์เซอร์
will-change ได้รับการรองรับอย่างสมบูรณ์ในเบราว์เซอร์สมัยใหม่ทั้งหมด เบราว์เซอร์ถือว่าสิ่งนี้เป็นคำแนะนำ ไม่ใช่คำสั่ง และอาจเพิกเฉยหากทรัพยากรมีจำกัด อย่าพึ่งพาสิ่งนี้เป็นการรับประกัน แต่ให้ใช้เป็นเพียงคำแนะนำด้านประสิทธิภาพ
ตรวจสอบความรู้
ความเสี่ยงหลักของการใช้ will-change กับองค์ประกอบจำนวนมากพร้อมกันคืออะไร
สรุป
will-change จะย้ายองค์ประกอบไปยังเลเยอร์ตัวประกอบภาพของ GPU ล่วงหน้าก่อนเริ่มแอนิเมชัน ทำให้ไม่ต้องเสียต้นทุนในการย้ายเลเยอร์เมื่อเริ่มแอนิเมชัน ควรใช้อย่างไดนามิกและเท่าที่จำเป็น เฉพาะจุดที่การวิเคราะห์ประสิทธิภาพแสดงว่ามีอาการกระตุก เพื่อหลีกเลี่ยงการใช้หน่วยความจำ GPU มากเกินไปจากการย้ายเลเยอร์จำนวนมาก
คำถามที่พบบ่อย
บทเรียน “will-change และการเลื่อนระดับเลเยอร์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “will-change และการเลื่อนระดับเลเยอร์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “will-change และการเลื่อนระดับเลเยอร์”
แจ้งเบราว์เซอร์ให้เลื่อนองค์ประกอบไปยังเลเยอร์ของ GPU ด้วย will-change เพื่อให้ภาพเคลื่อนไหวลื่นไหลขึ้น คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “will-change และการเลื่อนระดับเลเยอร์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- CSS สำคัญและการบล็อกการแสดงผล
- การจัดวาง การวาด และการประกอบ: กระบวนการแสดงผล
- will-change และการเลื่อนระดับเลเยอร์
- ความครอบคลุมของ CSS และรูปแบบที่ไม่ได้ใช้