เลื่อนการแสดงผลเนื้อหาที่ใช้ทรัพยากรมาก

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

คุณสามารถใช้พร็อพเพอร์ตี้ content-visibility ของ CSS และแอตทริบิวต์ hidden="until-found" ของ HTML เพื่อเพิ่มประสิทธิภาพการแสดงผลได้ แม้ว่าทั้ง 2 อย่างจะช่วยเพิ่มประสิทธิภาพ แต่ก็มีกรณีการใช้งานที่แตกต่างกัน

กรณีที่ควรใช้แต่ละวิธี

วิธีใช้ content-visibility: auto

การเลือกเนื้อหาที่ไม่ได้อยู่บนหน้าจอ

บังคับ: คุณต้องระบุอย่างรอบคอบว่าองค์ประกอบใดได้รับ content-visibility: auto

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

ขั้นตอนการติดตั้งใช้งาน

1. บังคับ: ระบุส่วนที่มีขนาดใหญ่ซึ่งได้รับการยืนยันว่าอยู่นอกหน้าจอเมื่อโหลดครั้งแรก
2. จำเป็น: ใช้ content-visibility: auto กับองค์ประกอบนอกหน้าจอแต่ละรายการเหล่านี้
3. ต้องระบุ: ระบุขนาดโครงสร้างเลย์เอาต์โดยประมาณโดยใช้ contain-intrinsic-size ในแต่ละองค์ประกอบ

วิธีใช้ contain-intrinsic-size

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

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

โค้ดตัวอย่าง

/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
  /* MANDATORY: Skips rendering calculations when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide an estimated size to prevent layouts shifts.
    - 'auto' is optional and enables the browser to remember the actual size
      once rendered. It must be paired with a <length> value to be used for
      the first render.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '150px' is the estimated height of this element. This can be any valid
      CSS <length> value.
   */
  contain-intrinsic-size: auto none auto 150px; 
}

วิธีใช้ content-visibility: hidden

1. ระบุส่วนที่หนัก: ค้นหาบล็อกเลย์เอาต์ที่ซ่อนอยู่ตั้งแต่แรก (เช่น แถวเพิ่มเติมในตารางข้อมูลขนาดใหญ่)
2. ใช้ CSS: เพิ่ม content-visibility: hidden ลงในองค์ประกอบ
3. แสดงองค์ประกอบ: เมื่อควรแสดงองค์ประกอบ ให้เปลี่ยนพร็อพเพอร์ตี้ content-visibility เป็น visible หรือ auto

โค้ดตัวอย่าง

.cached-view {
  /* Hides content but caches rendering state */
  content-visibility: hidden;
}

.cached-view.is-active {
  content-visibility: visible;
}

เนื่องจาก content-visibility: hidden ยกเว้นองค์ประกอบและองค์ประกอบย่อยจากแผนผังการช่วยเหลือพิเศษและการค้นหาในหน้าเว็บ อย่าใช้หากเนื้อหาต้องยังคงค้นพบได้ขณะที่ซ่อนอยู่ หากต้องการให้เนื้อหาที่ซ่อนยังคงค้นหาได้ผ่านฟีเจอร์ค้นหาในหน้าเว็บในตัว ให้ใช้ hidden="until-found" ตามที่อธิบายไว้ในค้นหาเนื้อหาที่ซ่อน

แนวทางปฏิบัติแนะนำ

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

กลยุทธ์สำรอง

content-visibility สำรอง

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

/* Default for everyone */
.inactive {
  display: none;
}

/* Modern Browsers only */
@supports (content-visibility: hidden) {
 .inactive {
    display: block; /* Turn the layout box back on */
    content-visibility: hidden;
  }
}