การจัดวาง การวาด และการประกอบ: กระบวนการแสดงผล
ทำความเข้าใจกระบวนการจัดวาง การวาด และการประกอบของเบราว์เซอร์ เพื่อคาดการณ์ต้นทุนของการเปลี่ยนรูปแบบ
การจัดวาง การวาด และการประกอบ: กระบวนการแสดงผล เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
สามขั้นตอนของการแสดงผล
หลังจากสร้างต้นไม้การแสดงผลแล้ว เบราว์เซอร์จะทำงานสามขั้นตอน ได้แก่ การจัดวาง (คำนวณขนาดและตำแหน่งขององค์ประกอบ) การวาด (เติมพิกเซลด้วยสี ข้อความ และรูปภาพ) และการประกอบ (รวมเลเยอร์ที่วาดแล้วและแสดงบนหน้าจอ)
การจัดวาง (การจัดวางใหม่)
การจัดวางจะคำนวณเรขาคณิต ได้แก่ ความกว้าง ความสูง และตำแหน่ง x/y ของทุกองค์ประกอบ การเปลี่ยนคุณสมบัติที่มีผลต่อเรขาคณิต เช่น width, margin, padding, font-size และ position จะเรียกใช้การจัดวางกับองค์ประกอบนั้น และอาจรวมถึงทั้งทรีลูกหลาน ซึ่งเป็นขั้นตอนที่มีค่าใช้จ่ายสูงที่สุด
การวาด
การวาดจะเติมพิกเซลให้แต่ละเลเยอร์ ได้แก่ พื้นหลัง เส้นขอบ ข้อความ และเงา การเปลี่ยน color, background-color, visibility หรือ border-radius จะเรียกให้วาดใหม่โดยไม่ต้องจัดวางใหม่ ซึ่งมีค่าใช้จ่ายน้อยกว่าการจัดวาง แต่ยังอาจมีค่าใช้จ่ายสูงหากต้องวาดพื้นที่ขนาดใหญ่ใหม่
การประกอบ
ตัวประกอบจะรวมเลเยอร์โดยใช้ GPU คุณสมบัติ CSS ที่มีผลต่อการประกอบเท่านั้น ได้แก่ transform และ opacity สามารถทำให้เคลื่อนไหวได้โดยไม่เรียกใช้การจัดวางหรือการวาด GPU จัดการคุณสมบัติเหล่านี้ที่ 60 เฟรมต่อวินาทีโดยใช้ CPU เพียงเล็กน้อย
ข้อมูลอ้างอิง CSS Triggers
csstriggers.com (ปัจจุบันเป็นเอกสารฝั่งเบราว์เซอร์) บันทึกว่าคุณสมบัติ CSS ใดเรียกใช้การจัดวาง การวาด และหรือการประกอบในแต่ละเอ็นจินเบราว์เซอร์ ใช้ข้อมูลนี้ตรวจสอบคุณสมบัติของแอนิเมชัน และควรเลือกใช้ transform หรือ opacity สำหรับคุณสมบัติที่ทำให้เคลื่อนไหว
การจัดวางกระหน่ำซ้ำ
การจัดวางกระหน่ำซ้ำเกิดขึ้นเมื่อ JavaScript สลับไปมาระหว่างการอ่านคุณสมบัติการจัดวาง (offsetWidth) และการเขียนคุณสมบัติรูปแบบภายในลูป การเขียนแต่ละครั้งจะทำให้การจัดวางใช้ไม่ได้ ส่วนการอ่านแต่ละครั้งจะบังคับให้จัดวางใหม่แบบพร้อมกัน จัดกลุ่มการอ่านทั้งหมดไว้ก่อนการเขียนทั้งหมดเพื่อหลีกเลี่ยงปัญหานี้
<pre class="snippet">// BAD: read-write-read-write loop
elements.forEach(el => { const w = el.offsetWidth; el.style.width = w + 10 + "px"; });
// GOOD: batch reads then writes</pre>คุณสมบัติที่ตัวประกอบจัดการเท่านั้น
เฉพาะ transform และ opacity เท่านั้นที่ตัวประกอบจัดการได้ทั้งหมด เมื่อองค์ประกอบอยู่บนเลเยอร์ของตัวเอง การทำให้คุณสมบัติอื่นเคลื่อนไหว แม้แต่ left/top จะเรียกใช้การจัดวางหรือการวาดบนเธรดหลัก และอาจทำให้ภาพเคลื่อนไหวกระตุก
การสร้างเลเยอร์ GPU
เบราว์เซอร์จะย้ายองค์ประกอบไปไว้ในเลเยอร์ GPU ของตัวเองเมื่อองค์ประกอบนั้นมี will-change: transform มีแอนิเมชัน CSS บน transform หรือ opacity มีตำแหน่งแบบคงที่ร่วมกับองค์ประกอบข้างเคียงที่ใช้การประกอบ หรือมีการแปลงแบบสามมิติ แต่ละเลเยอร์ใช้หน่วยความจำ GPU ดังนั้นเลเยอร์ที่มีจำนวนมากเกินไปจะทำให้หน่วยความจำตึงตัว
การหลีกเลี่ยงพายุการวาด
พายุการวาดเกิดขึ้นเมื่อพื้นที่ขนาดใหญ่ของหน้าเว็บถูกวาดใหม่ในทุกเฟรม โปรไฟล์ใน Chrome DevTools → การเรนเดอร์ → การกะพริบของการวาด เพื่อระบุพื้นที่ที่ถูกวาดใหม่ แยกองค์ประกอบที่มีการทำแอนิเมชันบ่อยไว้ในเลเยอร์ของตนเอง เพื่อจำกัดพื้นที่ที่ต้องวาดใหม่
แผงประสิทธิภาพของ DevTools
บันทึกโปรไฟล์ประสิทธิภาพใน Chrome DevTools แผนภูมิเปลวไฟจะแสดงเหตุการณ์การจัดวาง การอัปเดตต้นไม้เลเยอร์ การวาด และการประกอบภาพ แถบการจัดวางหรือการวาดที่ยาวบ่งบอกถึงคอขวด ควรรักษาเวลาเรนเดอร์ต่อเฟรมให้ต่ำกว่า 16ms เพื่อคงอัตรา 60 เฟรมต่อวินาที
แนวทางการทำแอนิเมชันเชิงปฏิบัติ
ทำแอนิเมชันด้วยการแปลงและความทึบเมื่อเป็นไปได้ ใช้เส้นทางการตัดแทนความกว้างและความสูงสำหรับแอนิเมชันการเปิดเผย — เส้นทางการตัดเหมาะกับตัวประกอบภาพในเบราว์เซอร์สมัยใหม่ หลีกเลี่ยงการทำแอนิเมชันเงากล่อง แต่ให้ใช้ความทึบร่วมกับองค์ประกอบเทียมที่วาดเงาไว้ล่วงหน้าแทน
ตรวจสอบความรู้
คุณสมบัติ CSS สองรายการใดที่สามารถทำแอนิเมชันได้โดยไม่กระตุ้นการจัดวางหรือการวาด
สรุป
กระบวนการเรนเดอร์ — การจัดวาง การวาด และการประกอบภาพ — เป็นตัวกำหนดประสิทธิภาพของแอนิเมชัน การจัดวางใช้ทรัพยากรมากที่สุด การวาดใช้ทรัพยากรในระดับปานกลาง และคุณสมบัติที่ทำเฉพาะการประกอบภาพ เช่น การแปลงและความทึบ จะจัดการโดย GPU การทำความเข้าใจตัวกระตุ้นต่าง ๆ ช่วยให้สร้างแอนิเมชันที่ลื่นไหลที่ 60 เฟรมต่อวินาทีได้โดยไม่เกิดการจัดวางซ้ำอย่างหนักหรือพายุการวาด
คำถามที่พบบ่อย
บทเรียน “การจัดวาง การวาด และการประกอบ: กระบวนการแสดงผล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การจัดวาง การวาด และการประกอบ: กระบวนการแสดงผล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การจัดวาง การวาด และการประกอบ: กระบวนการแสดงผล”
ทำความเข้าใจกระบวนการจัดวาง การวาด และการประกอบของเบราว์เซอร์ เพื่อคาดการณ์ต้นทุนของการเปลี่ยนรูปแบบ คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การจัดวาง การวาด และการประกอบ: กระบวนการแสดงผล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- CSS สำคัญและการบล็อกการแสดงผล
- การจัดวาง การวาด และการประกอบ: กระบวนการแสดงผล
- will-change และการเลื่อนระดับเลเยอร์
- ความครอบคลุมของ CSS และรูปแบบที่ไม่ได้ใช้