ปรับปรุงเวลาในการโหลดครั้งแรกโดยข้ามการแสดงภาพเนื้อหานอกหน้าจอ
content-visibility
ซึ่งเปิดตัวใน Chromium 85 ก็อาจเป็นหนึ่งใน CSS ใหม่ที่มีประสิทธิภาพมากที่สุด
สำหรับปรับปรุงประสิทธิภาพการโหลดหน้าเว็บ content-visibility
จะเปิดใช้
User Agent เพื่อข้ามการแสดงผล
ขององค์ประกอบ ซึ่งรวมถึงการออกแบบและวาดภาพ
จนกว่าจะจำเป็น เนื่องจากการแสดงผลจะถูกข้าม หากเนื้อหาส่วนใหญ่
เนื้อหาอยู่นอกหน้าจอ การใช้พร็อพเพอร์ตี้ content-visibility
ทำให้
ผู้ใช้ในระยะแรกโหลดได้เร็วขึ้นมาก นอกจากนี้ยังช่วยให้โต้ตอบกับ
เนื้อหาบนหน้าจอ เยี่ยมไปเลย
![เดโมที่มีรูปแสดงถึงผลลัพธ์เครือข่าย](https://web.dev/static/articles/content-visibility/image/demo-figures.jpg?authuser=5&hl=th)
content-visibility: auto
กับพื้นที่เนื้อหาแบบแยกส่วนช่วยเพิ่มประสิทธิภาพการแสดงผล 7 เท่าเมื่อโหลดครั้งแรก อ่านต่อเพื่อดูข้อมูลเพิ่มเติมการสนับสนุนเบราว์เซอร์
content-visibility
อาศัยพื้นฐานภายในคอนเทนเนอร์ CSS
ข้อกำหนด แม้ว่า content-visibility
จะ
รองรับใน Chromium 85 ในขณะนี้ (และถือว่ามูลค่า
การสร้างต้นแบบ" สำหรับ
Firefox) ข้อกำหนดคอนเทนเนอร์ ได้รับการรองรับในที่ทันสมัยที่สุด
เบราว์เซอร์
การควบคุม CSS
กุญแจสำคัญและเป้าหมายโดยรวมของการควบคุม CSS คือการเปิดใช้การแสดงผล การปรับปรุงประสิทธิภาพของเนื้อหาเว็บโดยมอบการแยกแบบคาดเดาได้ของ แผนผังย่อย DOM จากส่วนที่เหลือของหน้า
โดยทั่วไป นักพัฒนาซอฟต์แวร์สามารถบอกเบราว์เซอร์ว่าส่วนต่างๆ ของหน้าเว็บประกอบด้วยอะไรบ้าง เป็นชุดเนื้อหา ซึ่งทำให้เบราว์เซอร์สามารถให้เหตุผลเกี่ยวกับเนื้อหาได้โดย โดยต้องพิจารณาสถานะนอกโครงสร้างย่อย การรู้ว่าส่วนใดของเนื้อหา (โครงสร้างย่อย) มีเนื้อหาที่แยกออกมา หมายความว่าเบราว์เซอร์สามารถเพิ่มประสิทธิภาพ ที่ช่วยในการตัดสินใจในการแสดงผลหน้าเว็บ
CSS มีอยู่ 4 ประเภท
การควบคุม
แต่ละค่าที่เป็นไปได้สำหรับพร็อพเพอร์ตี้ CSS contain
ซึ่งนำมารวมกันได้
ในรายการค่าที่คั่นด้วยเว้นวรรค
size
: การมีขนาดองค์ประกอบที่ช่วยให้ช่องขององค์ประกอบสามารถ โดยไม่จำเป็นต้องตรวจสอบองค์ประกอบที่สืบทอดมา ซึ่งหมายความว่าเราสามารถ อาจข้ามการจัดวางองค์ประกอบสืบทอดได้หากเราต้องการเพียงขนาดของlayout
: การปิดกั้นเลย์เอาต์หมายความว่าองค์ประกอบสืบทอดจะไม่ส่งผลต่อ การจัดวางภายนอกของช่องอื่นๆ บนหน้าเว็บ ซึ่งอาจทำให้เราข้าม ของพื้นที่โฆษณาย่อย ถ้าเราต้องการทำคือการจัดวางช่องอื่นๆstyle
: การควบคุมรูปแบบช่วยให้แน่ใจว่าพร็อพเพอร์ตี้ที่อาจส่งผลต่อ มากกว่าแค่องค์ประกอบสืบทอดไม่ได้ Escape องค์ประกอบ (เช่น ตัวนับ) ช่วงเวลานี้ ช่วยให้เราข้ามการคำนวณรูปแบบสำหรับองค์ประกอบสืบทอดได้ ถ้าเรา ต้องการคือการประมวลผลรูปแบบในองค์ประกอบอื่นๆpaint
: การควบคุมสีช่วยดูแลให้องค์ประกอบสืบทอดของกล่องที่มี ไม่แสดงนอกขอบเขต ไม่มีข้อมูลใดล้นเอลิเมนต์อย่างชัดเจน และหากองค์ประกอบหนึ่งไม่ได้อยู่ในหน้าจอหรือมองไม่เห็น องค์ประกอบสืบทอดจะ และไม่สามารถมองเห็นได้ ซึ่งอาจทำให้เราข้ามการวาดภาพ องค์ประกอบสืบทอดหากองค์ประกอบอยู่นอกหน้าจอ
กำลังข้ามการแสดงผลงานด้วย content-visibility
และอาจเป็นการยากที่จะทราบว่าจะใช้ค่าควบคุมค่าใด เนื่องจากเบราว์เซอร์
การเพิ่มประสิทธิภาพจะเริ่มต้นได้เมื่อมีการระบุชุดที่เหมาะสมเท่านั้น คุณสามารถ
ลองพิจารณาค่าต่างๆ เพื่อดูว่าสิ่งใดที่ได้ผล
ดีที่สุด หรือคุณ
สามารถใช้คุณสมบัติ CSS อื่นที่เรียกว่า content-visibility
เพื่อปรับใช้
อัตโนมัติ content-visibility
รับประกันว่าคุณจะได้รับ
ประสิทธิภาพที่เพิ่มขึ้นซึ่งเบราว์เซอร์สามารถมอบให้ได้โดยใช้ความพยายามเพียงเล็กน้อยจาก
พร็อพเพอร์ตี้การแสดงเนื้อหา ยอมรับหลายค่า แต่ auto
คือค่า
ที่ช่วยให้ประสิทธิภาพดีขึ้นในทันที องค์ประกอบที่มี
content-visibility: auto
จะได้รับการควบคุม layout
, style
และ paint
ถ้า
องค์ประกอบอยู่นอกหน้าจอ (และไม่เกี่ยวข้องกับผู้ใช้ - มีความเกี่ยวข้อง
องค์ประกอบที่มีโฟกัสหรือการเลือกในโครงสร้างย่อย)
ได้รับการกักเก็บ size
ด้วย (และหยุด
ภาพวาด
และ
การทดสอบแบบ Hit
เนื้อหา)
หมายความว่าอย่างไร กล่าวโดยสรุปคือ หากองค์ประกอบอยู่นอกหน้าจอ ไม่แสดงผล เบราว์เซอร์จะกำหนดขนาดขององค์ประกอบโดยไม่พิจารณา เนื้อหาใดๆ ของโค้ด และจะหยุดอยู่แค่นั้น การแสดงผลส่วนใหญ่ เช่น การจัดรูปแบบ และการจัดวางแผนผังย่อยขององค์ประกอบจะถูกข้าม
เมื่อองค์ประกอบเข้าใกล้วิวพอร์ต เบราว์เซอร์จะไม่เพิ่ม size
อีกต่อไป
การควบคุมและเริ่มการวาดภาพและทดสอบเนื้อหาขององค์ประกอบ ช่วงเวลานี้
ทำให้การแสดงภาพเสร็จได้ทันเวลาที่ผู้ใช้จะเห็น
หมายเหตุเกี่ยวกับการช่วยเหลือพิเศษ
ฟีเจอร์หนึ่งของ content-visibility: auto
คือเนื้อหานอกหน้าจอจะยังคงอยู่ในโมเดลออบเจ็กต์เอกสาร ดังนั้นจึงเป็นแผนผังการช่วยเหลือพิเศษ (ต่างจาก visibility: hidden
) ซึ่งหมายความว่าเนื้อหาจะสามารถค้นหาในหน้าเว็บและไปยังส่วนอื่นๆ ได้โดยไม่ต้องรอให้โหลดหรือลดประสิทธิภาพการแสดงผล
อย่างไรก็ตาม อีกด้านหนึ่งของวิธีนี้ก็คือองค์ประกอบจุดสังเกตที่มีฟีเจอร์รูปแบบ เช่น display: none
หรือ visibility: hidden
จะปรากฏในแผนผังการช่วยเหลือพิเศษเมื่ออยู่นอกหน้าจอด้วย เนื่องจากเบราว์เซอร์จะไม่แสดงรูปแบบเหล่านี้จนกว่าจะเข้าสู่วิวพอร์ต เพื่อป้องกันไม่ให้ข้อมูลเหล่านี้แสดงในแผนผังการช่วยเหลือพิเศษ ซึ่งอาจทำให้เกิดความยุ่งเหยิงได้ โปรดเพิ่ม aria-hidden="true"
เช่น บล็อกท่องเที่ยว
content-visibility: auto
กับพื้นที่เล็กๆ ทางด้านซ้าย ผลลัพธ์จะแสดงเวลาในการแสดงผลตั้งแต่ 232 มิลลิวินาที ไปจนถึง 30 มิลลิวินาทีเมื่อโหลดหน้าเว็บครั้งแรกบล็อกท่องเที่ยวมักจะประกอบด้วยชุดเรื่องที่มีรูปภาพ 2-3 ภาพ ข้อความอธิบาย นี่คือสิ่งที่เกิดขึ้นในเบราว์เซอร์ทั่วไปเมื่อนำทางไปยัง บล็อกท่องเที่ยว:
- ส่วนหนึ่งของหน้าเว็บจะถูกดาวน์โหลดจากเครือข่าย พร้อมด้วย ที่ไม่ซับซ้อน
- รูปแบบและการจัดวางเนื้อหาทั้งหมดของหน้าเว็บในเบราว์เซอร์ ที่กำลังพิจารณาว่าผู้ใช้มองเห็นเนื้อหานี้หรือไม่
- เบราว์เซอร์จะย้อนกลับไปที่ขั้นตอนที่ 1 จนกว่าหน้าเว็บและทรัพยากรทั้งหมด ดาวน์โหลดแล้ว
ในขั้นตอนที่ 2 เบราว์เซอร์จะประมวลผลเนื้อหาทั้งหมดที่กำลังค้นหาสิ่งที่อาจ มีการเปลี่ยนแปลง อัปเดตรูปแบบและเลย์เอาต์ขององค์ประกอบใหม่ๆ รวมถึง องค์ประกอบที่อาจมีการเปลี่ยนแปลงอันเนื่องมาจากการอัปเดตใหม่ๆ นี่คือการแสดงภาพ งาน การดำเนินการนี้ต้องใช้เวลา
![ภาพหน้าจอของบล็อกท่องเที่ยว](https://web.dev/static/articles/content-visibility/image/a-screenshot-a-travel-bl-d12bedce7d152.jpg?authuser=5&hl=th)
คราวนี้ก็มาดูว่าจะเกิดอะไรขึ้นหากคุณใส่ content-visibility: auto
ในแต่ละแท็ก
แต่ละเรื่องในบล็อก ลูปทั่วไปจะเหมือนกัน: เบราว์เซอร์
ดาวน์โหลดและแสดงผลเนื้อหาบางส่วนของหน้าเว็บ แต่ความแตกต่างจะอยู่ที่
ปริมาณงานที่ทำในขั้นตอนที่ 2
การเปิดเผยเนื้อหาจะช่วยจัดรูปแบบและจัดรูปแบบเนื้อหาทั้งหมดที่ ขณะนี้ผู้ใช้มองเห็นได้ (อยู่บนหน้าจอ) อย่างไรก็ตาม เมื่อประมวลผล นอกหน้าจอโดยสมบูรณ์ เบราว์เซอร์จะข้ามการแสดงภาพ จัดรูปแบบและจัดรูปแบบช่องขององค์ประกอบ
ประสิทธิภาพการโหลดหน้าเว็บนี้จะเหมือนกับว่าหน้าเว็บเต็มหน้าจอ และกล่องเปล่าสำหรับเรื่องราวนอกจอแต่ละเรื่อง วิธีนี้ได้ผลมาก ดีขึ้น โดยคาดว่าจะลดลงอย่างน้อย 50% จากต้นทุนการแสดงผล กำลังโหลด ในตัวอย่างของเรา เราเห็นการเพิ่มจากเวลาแสดงผล 232 มิลลิวินาที เป็น ระยะเวลาการแสดงผล 30 มิลลิวินาที ซึ่งช่วยเพิ่มประสิทธิภาพได้ถึง 7 เท่า
คุณต้องทำอะไรเพื่อให้ได้รับสิทธิประโยชน์เหล่านี้ ก่อนอื่น เรา แบ่งเนื้อหาออกเป็นส่วนๆ ดังนี้
![ภาพหน้าจอที่มีคำอธิบายประกอบซึ่งแบ่งเนื้อหาออกเป็นส่วนต่างๆ พร้อมคลาส CSS](https://web.dev/static/articles/content-visibility/image/an-annotated-screenshot-9dac5c2e32b01.jpg?authuser=5&hl=th)
story
เพื่อรับ content-visibility: auto
ดูการสาธิตบน Codepenจากนั้น เราจะใช้กฎสไตล์ต่อไปนี้กับส่วนต่างๆ
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* Explained in the next section. */
}
การระบุขนาดตามธรรมชาติขององค์ประกอบด้วย contain-intrinsic-size
เพื่อที่จะตระหนักถึงประโยชน์ที่เป็นไปได้ของ content-visibility
เบราว์เซอร์
จำเป็นต้องใช้การควบคุมขนาดเพื่อให้การแสดงผลเนื้อหา
ไม่ส่งผลกระทบต่อขนาดขององค์ประกอบแต่อย่างใด ซึ่งหมายความว่าองค์ประกอบ
จะแสดงรูปแบบราวกับว่าพื้นที่นั้นว่างเปล่า หากองค์ประกอบไม่ได้ระบุความสูง
ในเลย์เอาต์บล็อกปกติ ขนาดก็จะมีความสูง 0
ซึ่งวิธีนี้อาจไม่เหมาะสม เนื่องจากขนาดของแถบเลื่อนจะมีการเปลี่ยนแปลง ที่พึ่งพาแต่ละเรื่องราวที่มีความสูงที่ไม่เป็น 0
โชคดีที่ CSS มีพร็อพเพอร์ตี้อีกรายการหนึ่ง ซึ่งก็คือ contain-intrinsic-size
ระบุขนาดตามธรรมชาติขององค์ประกอบได้อย่างมีประสิทธิภาพ หากองค์ประกอบนั้น
ได้รับผลกระทบจากการควบคุมขนาด ในตัวอย่างของเรา เราจะตั้งค่าเป็น 1000px
เป็น
ความสูงและความกว้างของส่วนต่างๆ โดยประมาณ
ซึ่งหมายความว่าจะจัดวางราวกับว่ามีลูกเดียวที่มีขนาด "ภายใน"
เพื่อให้มั่นใจว่า div ที่ไม่ได้ปรับขนาดยังคงใช้พื้นที่
contain-intrinsic-size
ทำหน้าที่เป็นขนาดตัวยึดตำแหน่งแทนเนื้อหาที่แสดงผล
ใน Chromium 98 ขึ้นไปจะมี 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
รายการออกแล้ว)
กรณีการใช้งาน content-visibility: hidden
ที่ยอดเยี่ยมบางส่วนคือกรณีที่ติดตั้งใช้งาน
แถบเลื่อนเสมือนขั้นสูง และเลย์เอาต์การวัดผล และเหมาะสำหรับ
แอปพลิเคชันหน้าเว็บเดียว (SPA) ข้อมูลพร็อพเพอร์ตี้แอปที่ไม่ได้ใช้งานสามารถปล่อยไว้ใน DOM ได้ด้วย
ใช้ content-visibility: hidden
เพื่อป้องกันการแสดงผล แต่ยังคงรักษาการแสดงผล
สถานะแคช ซึ่งทำให้มุมมองแสดงผลอย่างรวดเร็วเมื่อกลับมาใช้งานอีกครั้ง
ผลต่อการโต้ตอบกับ Next Paint (INP)
INP เป็นเมตริกที่ประเมินความสามารถของหน้าเว็บในการตอบสนองต่อข้อมูลจากผู้ใช้ได้อย่างน่าเชื่อถือ การปรับเปลี่ยนตามอุปกรณ์อาจส่งผลกระทบต่องานจำนวนมากเกินไปซึ่งเกิดขึ้นในเทรดหลัก รวมถึงการแสดงผลงาน
เมื่อใดก็ตามที่คุณลดการแสดงผลในหน้าเว็บหนึ่งๆ ได้ จะเป็นการให้โอกาสแก่เทรดหลักในการตอบกลับข้อมูลจากผู้ใช้ได้เร็วขึ้น ซึ่งรวมถึงการแสดงผลงาน และการใช้พร็อพเพอร์ตี้ CSS content-visiblity
ตามความเหมาะสมช่วยลดงานในการแสดงผล โดยเฉพาะในช่วงเริ่มต้นเมื่องานแสดงผลและเลย์เอาต์ส่วนใหญ่เสร็จ
การลดงานการแสดงผลจะมีผลโดยตรงต่อ INP เมื่อผู้ใช้พยายามโต้ตอบกับหน้าที่ใช้พร็อพเพอร์ตี้ content-visibility
อย่างเหมาะสมเพื่อเลื่อนเลย์เอาต์และการแสดงผลขององค์ประกอบนอกหน้าจอ จะเป็นการให้เทรดหลักตอบสนองต่องานสำคัญที่ผู้ใช้มองเห็นได้ วิธีนี้จะปรับปรุง INP ของหน้าเว็บได้ในบางสถานการณ์
บทสรุป
content-visibility
และข้อกำหนดคอนเทนเนอร์ CSS แสดงถึงประสิทธิภาพที่น่าสนใจบางอย่าง
การเพิ่มพลังต่างๆ จะพร้อมใช้งานในไฟล์ CSS โดยตรง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ
ที่พัก โปรดดูที่