ปรับปรุงเวลาในการโหลดครั้งแรกโดยข้ามการแสดงภาพเนื้อหานอกหน้าจอ
เผยแพร่: 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 เบราว์เซอร์จะประมวลผลเนื้อหาทั้งหมดเพื่อหาสิ่งที่อาจเปลี่ยนแปลงไป โดยจะอัปเดตสไตล์และเลย์เอาต์ขององค์ประกอบใหม่ รวมถึงองค์ประกอบที่อาจมีการย้ายตำแหน่งอันเป็นผลมาจากการอัปเดตใหม่ การดำเนินการนี้เป็นการเรนเดอร์งาน ซึ่งอาจใช้เวลาสักครู่
ตอนนี้ลองพิจารณาว่าจะเกิดอะไรขึ้นหากคุณใส่ 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 ของคุณจะได้รับการเพิ่มประสิทธิภาพที่น่าตื่นเต้น ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้เหล่านี้ได้ที่