Chapter 59: Lazy Loading & Resource Scheduling

Content Visibility Optimization & Render Skipping

**Part 12: Performance & Optimization** — Chapter 59: Lazy Loading & Code Splitting

LEARNING OBJECTIVES ⌵
  • Understand how content-visibility: auto enables the browser to skip layout and painting for off-screen elements.
  • Use contain-intrinsic-size to prevent scrollbar jumping and layout instability.
  • Optimize find-in-page (Ctrl+F) integration with hidden="until-found" and beforematch.
  • Benchmark DOM rendering performance before and after content-visibility.
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

💻 Interactive Code Playground

/* Card Container */
.article-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 350px;
  
  margin-block-end: 2rem;
  padding: 1.5rem;
  background: var(--surface-2);
  border-radius: 8px;
}

📌 Key Takeaways

  • content-visibility: auto is one of the most impactful single-line CSS performance optimizations for long, scrollable pages.
  • Always provide estimated intrinsic dimensions via contain-intrinsic-size: auto <height> to maintain stable scroll heights.
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?