content-visibility: คุณสมบัติ CSS ใหม่ที่เพิ่มประสิทธิภาพการแสดงผลของคุณ

ปรับปรุงเวลาในการโหลดครั้งแรกโดยข้ามการแสดงภาพเนื้อหานอกหน้าจอ

Una Kravets

Jeremy Wagner

Vladimir Levin

เผยแพร่: 5 สิงหาคม 2020

พร็อพเพอร์ตี้ content-visibility ช่วยให้ User Agent ข้ามการเรนเดอร์องค์ประกอบ ซึ่งรวมถึงเลย์เอาต์และการวาดภาพ เว้นแต่ว่าจะมีความจำเป็น เนื่องจากระบบจะข้ามการแสดงผล หากเนื้อหาส่วนใหญ่อยู่นอกหน้าจอ การใช้พร็อพเพอร์ตี้ content-visibility จะทำให้ผู้ใช้โหลดหน้าเว็บแรกได้เร็วขึ้นมาก และยังช่วยให้โต้ตอบกับเนื้อหาบนหน้าจอได้เร็วขึ้นด้วย เจ๋งดี

การจำกัด CSS

เป้าหมายหลักและครอบคลุมของการควบคุม CSS คือช่วยให้การปรับปรุงประสิทธิภาพการแสดงผลของเนื้อหาเว็บเป็นไปได้ด้วยการแยก DOM ย่อยที่คาดการณ์ได้ออกจากส่วนที่เหลือของหน้า

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

การรวม CSS มี 4 ประเภท ซึ่งแต่ละประเภทเป็นค่าที่เป็นไปได้สำหรับพร็อพเพอร์ตี้ CSS contain โดยสามารถรวมไว้ในรายการค่าที่คั่นด้วยเว้นวรรคได้ ดังนี้

• size: การจำกัดขนาดขององค์ประกอบช่วยให้มั่นใจได้ว่าช่องขององค์ประกอบจะวางผังได้โดยไม่ต้องตรวจสอบองค์ประกอบย่อย ซึ่งหมายความว่าเราอาจข้ามเลย์เอาต์ของรายการที่สืบทอดได้หากต้องการเพียงขนาดขององค์ประกอบ
• layout: การควบคุมเลย์เอาต์หมายความว่าองค์ประกอบสืบทอดจะไม่ส่งผลต่อเลย์เอาต์ภายนอกของช่องอื่นๆ ในหน้าเว็บ ซึ่งช่วยให้เราข้ามการจัดวางของรายการที่สืบทอดได้หากต้องการจัดวางกล่องอื่นๆ เท่านั้น
• style: การจำกัดสไตล์ช่วยให้มั่นใจว่าพร็อพเพอร์ตี้ที่ส่งผลต่อองค์ประกอบอื่นๆ นอกเหนือจากองค์ประกอบที่สืบทอดมาจะไม่หลุดออกจากองค์ประกอบ (เช่น ตัวนับ) ซึ่งช่วยให้เราข้ามการคำนวณสไตล์สำหรับองค์ประกอบที่สืบทอดได้หากต้องการคำนวณสไตล์ในองค์ประกอบอื่นๆ เท่านั้น
• paint: การจำกัดพื้นที่สีช่วยให้มั่นใจว่าองค์ประกอบที่สืบทอดมาจากกล่องที่บรรจุจะไม่แสดงนอกขอบเขตของกล่อง ไม่มีสิ่งใดที่มองเห็นได้ซึ่งจะแสดงเกินขอบขององค์ประกอบ และหากองค์ประกอบอยู่นอกหน้าจอหรือไม่มองเห็น องค์ประกอบที่สืบทอดมาก็จะมองไม่เห็นเช่นกัน ซึ่งอาจทำให้เราข้ามการวาดภาพองค์ประกอบสืบทอดได้ หากองค์ประกอบอยู่นอกหน้าจอ

ข้ามงานแสดงผลด้วย content-visibility

คุณอาจเลือกค่าการจำกัดได้ยาก เนื่องจากการเพิ่มประสิทธิภาพเบราว์เซอร์อาจเริ่มทํางานก็ต่อเมื่อระบุชุดที่เหมาะสมเท่านั้น คุณอาจลองใช้ค่าต่างๆ เพื่อดูรูปแบบที่ได้ผลดีที่สุด หรือจะใช้ content-visibility เพื่อนำองค์ประกอบที่จำเป็นไปใช้โดยอัตโนมัติก็ได้ content-visibility ช่วยให้มั่นใจว่าเบราว์เซอร์จะทำงานได้อย่างเต็มประสิทธิภาพสูงสุดโดยไม่ต้องลงแรงมากในฐานะนักพัฒนาซอฟต์แวร์

พร็อพเพอร์ตี้การเปิดเผยเนื้อหายอมรับค่าหลายค่า แต่ auto เป็นพร็อพเพอร์ตี้ที่มีการปรับปรุงประสิทธิภาพได้ทันที องค์ประกอบที่มี content-visibility: auto จะได้รับการบรรจุ layout, style และ paint หากองค์ประกอบอยู่นอกหน้าจอ (และไม่เกี่ยวข้องกับผู้ใช้ องค์ประกอบที่เกี่ยวข้องคือองค์ประกอบที่มีโฟกัสหรือการเลือกในซับต้นไม้) องค์ประกอบดังกล่าวก็จะได้รับsizeการจำกัด (และหยุดการวาด และการทดสอบการทํางานของเนื้อหา)

หมายความว่าอย่างไร กล่าวโดยย่อคือ หากองค์ประกอบอยู่นอกหน้าจอ ระบบจะไม่แสดงผลองค์ประกอบที่สืบทอด จากนั้นเบราว์เซอร์จะกำหนดขนาดขององค์ประกอบโดยไม่คำนึงถึงเนื้อหาใดๆ ขององค์ประกอบนั้น ระบบจะข้ามการแสดงผลส่วนใหญ่ เช่น การจัดสไตล์และเลย์เอาต์ของต้นไม้ย่อยขององค์ประกอบ

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

หมายเหตุเกี่ยวกับการช่วยเหลือพิเศษ

ฟีเจอร์หนึ่งของ content-visibility: auto คือเนื้อหาที่อยู่นอกหน้าจอจะยังคงอยู่ในโมเดลออบเจ็กต์เอกสารและโครงสร้างการช่วยเหลือพิเศษ (ต่างจาก visibility: hidden) ซึ่งหมายความว่าผู้ใช้สามารถค้นหาเนื้อหาในหน้าเว็บและไปยังเนื้อหาดังกล่าวได้โดยไม่ต้องรอให้โหลดหรือเสียประสิทธิภาพการแสดงผล

อย่างไรก็ตาม ข้อเสียคือองค์ประกอบจุดสังเกตที่มีฟีเจอร์สไตล์ เช่น display: none หรือ visibility: hidden จะปรากฏในต้นไม้การช่วยเหลือพิเศษด้วยเมื่ออยู่นอกหน้าจอ เนื่องจากเบราว์เซอร์จะไม่แสดงผลสไตล์เหล่านี้จนกว่าองค์ประกอบจะเข้าสู่วิวพอร์ต อย่าลืมเพิ่ม aria-hidden="true" ด้วยเพื่อไม่ให้รายการเหล่านี้ปรากฏในลําดับชั้นการช่วยเหลือพิเศษ ซึ่งอาจทําให้เกิดความยุ่งเหยิง

ตัวอย่าง: บล็อกการเดินทาง

โดยทั่วไปแล้ว บล็อกการเดินทางจะมีชุดเรื่องราวที่มีรูปภาพ 2-3 รูปและข้อความอธิบายบางส่วน สิ่งที่จะเกิดขึ้นในเบราว์เซอร์ทั่วไปเมื่อไปยังบล็อกการเดินทางมีดังนี้

1. ระบบจะดาวน์โหลดส่วนหนึ่งของหน้าเว็บจากเครือข่าย พร้อมกับทรัพยากรที่จำเป็น
2. เบราว์เซอร์จะจัดรูปแบบและวางเลย์เอาต์เนื้อหาทั้งหมดของหน้าโดยไม่พิจารณาว่าผู้ใช้จะเห็นเนื้อหาหรือไม่
3. เบราว์เซอร์จะกลับไปที่ขั้นตอนที่ 1 จนกว่าหน้าเว็บและทรัพยากรทั้งหมดจะดาวน์โหลดเสร็จ

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

ตอนนี้ลองพิจารณาว่าจะเกิดอะไรขึ้นหากคุณใส่ content-visibility: auto ในแต่ละเรื่องราวในบล็อก ลูปทั่วไปจะเหมือนกันคือ เบราว์เซอร์จะดาวน์โหลดและแสดงผลบางส่วนของหน้า แต่ความแตกต่างอยู่ที่ปริมาณงานที่ทําในขั้นตอนที่ 2

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

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

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

จากนั้นเราจะใช้กฎรูปแบบต่อไปนี้กับส่วนต่างๆ

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

ระบุขนาดตามปกติขององค์ประกอบด้วย contain-intrinsic-size

หากต้องการใช้ประโยชน์ที่เป็นไปได้ของ content-visibility เบราว์เซอร์ต้องใช้การจำกัดขนาดเพื่อให้แน่ใจว่าผลลัพธ์การแสดงผลของเนื้อหาจะไม่ส่งผลต่อขนาดขององค์ประกอบไม่ว่าในทางใดก็ตาม ซึ่งหมายความว่าองค์ประกอบจะแสดงผลราวกับว่างเปล่า หากองค์ประกอบไม่ได้ระบุความสูงในเลย์เอาต์บล็อกปกติ ความสูงขององค์ประกอบจะเป็น 0

วิธีนี้อาจไม่เหมาะนัก เนื่องจากขนาดของแถบเลื่อนจะเปลี่ยนไปโดยขึ้นอยู่กับความสูงของเรื่องราวแต่ละเรื่อง

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

ซึ่งหมายความว่าจะวางเลย์เอาต์ราวกับว่ามีองค์ประกอบย่อยรายการเดียวที่มีมิติข้อมูล "intrinsic-size" เพื่อให้ Div ที่ไม่มีขนาดยังคงใช้พื้นที่ contain-intrinsic-size จะทำหน้าที่เป็นขนาดตัวยึดตําแหน่งแทนเนื้อหาที่แสดงผล

คีย์เวิร์ด auto สําหรับ contain-intrinsic-size ทําให้เบราว์เซอร์จดจําขนาดที่แสดงผลล่าสุด (หากมี) และใช้ขนาดนั้นแทนขนาดตัวยึดตําแหน่งของนักพัฒนาแอป ตัวอย่างเช่น หากคุณระบุ contain-intrinsic-size: auto 300px องค์ประกอบจะเริ่มมีขนาดตามค่าเริ่มต้น 300px ในแต่ละมิติข้อมูล แต่เมื่อระบบแสดงผลเนื้อหาขององค์ประกอบแล้ว องค์ประกอบจะยังคงมีขนาดตามค่าเริ่มต้นที่แสดงผล ระบบจะจดจำการเปลี่ยนแปลงขนาดการแสดงผลในภายหลังด้วย ในทางปฏิบัติ หมายความว่าหากคุณเลื่อนองค์ประกอบที่มีการใช้ content-visibility: auto แล้วเลื่อนกลับออกนอกหน้าจอ องค์ประกอบนั้นจะคงความกว้างและความสูงที่เหมาะสมไว้โดยอัตโนมัติ และจะไม่เปลี่ยนกลับไปใช้ขนาดตัวยึดตำแหน่ง ฟีเจอร์นี้มีประโยชน์อย่างยิ่งสําหรับการเลื่อนแบบอินฟินิตี ซึ่งตอนนี้สามารถปรับปรุงการประมาณขนาดโดยอัตโนมัติเมื่อเวลาผ่านไปขณะที่ผู้ใช้สำรวจหน้าเว็บ

ซ่อนเนื้อหาด้วย content-visibility: hidden

จะเกิดอะไรขึ้นหากไม่ต้องการให้ระบบแสดงผลเนื้อหา ไม่ว่าเนื้อหาจะแสดงบนหน้าจอหรือไม่ก็ตาม แต่ยังใช้ประโยชน์จากสถานะการแสดงผลที่แคชไว้ ป้อนข้อมูลต่อไปนี้ content-visibility: hidden

พร็อพเพอร์ตี้ content-visibility: hidden ให้ประโยชน์ทั้งหมดของเนื้อหาที่ไม่มีการแสดงผลและสถานะการแสดงผลที่แคชไว้เหมือนกับที่ content-visibility: auto ทำนอกหน้าจอ อย่างไรก็ตาม ไฟล์จะไม่เริ่มแสดงผลบนหน้าจอโดยอัตโนมัติ ต่างจาก auto

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

เปรียบเทียบกับวิธีอื่นๆ ที่พบบ่อยในการซ่อนเนื้อหาขององค์ประกอบ

• display: none: ซ่อนองค์ประกอบและทำลายสถานะการแสดงผล ซึ่งหมายความว่าการเลิกซ่อนองค์ประกอบจะมีราคาสูงพอๆ กับการแสดงผลองค์ประกอบใหม่ที่มีเนื้อหาเดียวกัน
• visibility: hidden: ซ่อนองค์ประกอบและเก็บสถานะการแสดงผลไว้ การดำเนินการนี้ไม่ได้นำองค์ประกอบออกจากเอกสารอย่างแท้จริง เนื่องจากองค์ประกอบ (และซับต้นไม้) ยังคงใช้พื้นที่เชิงเรขาคณิตในหน้าเว็บและยังคงคลิกได้ และยังอัปเดตสถานะการแสดงผลได้ทุกเมื่อที่ต้องการ แม้จะซ่อนอยู่ก็ตาม

ในทางกลับกัน content-visibility: hidden จะซ่อนองค์ประกอบขณะที่ยังคงสถานะการแสดงผลไว้ ดังนั้นหากมีการเปลี่ยนแปลงที่ต้องทำ การเปลี่ยนแปลงจะเกิดขึ้นก็ต่อเมื่อองค์ประกอบแสดงอีกครั้งเท่านั้น (นั่นคือ มีการนำพร็อพเพอร์ตี้ content-visibility: hidden ออก)

Use Case ที่ยอดเยี่ยมบางรายการสำหรับ content-visibility: hidden ได้แก่ การติดตั้งใช้งานตัวเลื่อนเสมือนขั้นสูง และการวัดเลย์เอาต์ นอกจากนี้ ยังเหมาะสำหรับแอปพลิเคชันหน้าเว็บเดียว (SPA) ด้วย คุณสามารถเก็บมุมมองแอปที่ไม่ได้ใช้งานไว้ใน DOM โดยการใช้ content-visibility: hidden เพื่อป้องกันไม่ให้แสดง แต่ยังคงสถานะแคชไว้ วิธีนี้ช่วยให้การแสดงผลมุมมองรวดเร็วเมื่อกลับมาทำงานอีกครั้ง

ผลต่อ Interaction to Next Paint (INP)

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

เมื่อใดก็ตามที่คุณสามารถลดงานแสดงผลในหน้าเว็บหนึ่งๆ คุณได้ให้โอกาสแก่เธรดหลักในการตอบสนองต่อข้อมูลจากผู้ใช้ได้เร็วขึ้น ซึ่งรวมถึงงานแสดงผล และการใช้พร็อพเพอร์ตี้ content-visiblity CSS ในตำแหน่งที่เหมาะสมจะช่วยลดงานแสดงผลได้ โดยเฉพาะในช่วงเริ่มต้นเมื่องานแสดงผลและการจัดวางส่วนใหญ่เสร็จสมบูรณ์แล้ว

การลดงานการแสดงผลจะมีผลโดยตรงต่อ INP เมื่อผู้ใช้พยายามโต้ตอบกับหน้าที่ใช้พร็อพเพอร์ตี้ content-visibility อย่างถูกต้องเพื่อเลื่อนเลย์เอาต์และการเรนเดอร์องค์ประกอบที่อยู่นอกหน้าจอ คุณกำลังให้โอกาสเธรดหลักในการตอบสนองต่องานที่สําคัญซึ่งผู้ใช้มองเห็น วิธีนี้ช่วยปรับปรุง INP ของหน้าเว็บได้ในบางสถานการณ์

บทสรุป

content-visibility และข้อกำหนดการจำกัด CSS หมายความว่าไฟล์ CSS ของคุณจะได้รับการเพิ่มประสิทธิภาพที่น่าตื่นเต้น ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้เหล่านี้ได้ที่

• ข้อกำหนดเฉพาะในการจำกัดขอบเขตของ CSS
• MDN Docs ใน CSS Containment
• ฉบับร่าง CSSWG