เพียงแค่ใช้ content-visibility: auto ก็ช่วยเพิ่มความเร็วได้ เพราะจะไม่เรนเดอร์องค์ประกอบที่มองไม่เห็นบนหน้าจอ
เมื่อกำหนด auto ให้กับองค์ประกอบ จะมีการใช้ layout, style, paint จากสเปก CSS Containment และเมื่อองค์ประกอบนั้นอยู่นอกหน้าจอ ก็จะมีการใช้ size ด้วย
→ เมื่ออยู่นอกหน้าจอ ลูกหลานขององค์ประกอบนั้นจะไม่ถูกวาดเลยแม้แต่น้อย
→ เมื่อกลับมาใกล้หน้าจออีกครั้ง size จะถูกยกเลิก และเริ่ม hit-test
สามารถกำหนดขนาดเริ่มต้นที่ควรวาดได้ด้วย contain-intrinsic-size หากไม่กำหนดจะเป็น 0
เมื่อกำหนด content-visibility: hidden จะไม่เรนเดอร์เลย ราวกับว่าอยู่นอกหน้าจอ
→ ซ่อนองค์ประกอบและคงสถานะการเรนเดอร์ไว้ แต่ถ้ามีการเปลี่ยนแปลง เมื่อกลับมาแสดงอีกครั้งก็จะใช้ผลการเรนเดอร์นั้น
→ display:none - ซ่อนองค์ประกอบและทำลายสถานะการเรนเดอร์ กล่าวคือเมื่อแสดงอีกครั้งก็แทบไม่ต่างจากการวาดใหม่ทั้งหมด
→ visibility:hidden - ซ่อนองค์ประกอบและคงสถานะการเรนเดอร์ไว้ องค์ประกอบไม่ได้ถูกลบออกจากเอกสารจริง ยังคงกินพื้นที่และยังคลิกได้ แม้จะถูกซ่อนอยู่แต่ก็ยังอยู่ในสถานะที่เรนเดอร์ต่อไป
ยังไม่มีความคิดเห็น