content-visibility

Rare Earth Juejin Tech Community

Mar 7, 2025 · Frontend Development

Optimizing Infinite‑Scroll Waterfall Layouts with CSS Grid, IntersectionObserver, and Modern Browser Features

This article explains how to build a high‑performance infinite‑scroll waterfall layout for e‑commerce using CSS Grid, IntersectionObserver, native lazy‑loading attributes, asynchronous decoding, React's useTransition, content‑visibility, and the AVIF image format to reduce load time and improve smoothness.

AVIFCSS GridIntersectionObserver

0 likes · 13 min read

Optimizing Infinite‑Scroll Waterfall Layouts with CSS Grid, IntersectionObserver, and Modern Browser Features

KooFE Frontend Team

Oct 1, 2024 · Frontend Development

Boost Emoji Picker Performance with CSS content-visibility

The article explains how using the new CSS content-visibility property can dramatically reduce layout and paint costs when rendering tens of thousands of custom emojis, offering a lightweight alternative to full virtualization while preserving accessibility and searchability.

FrontendPerformancecontent-visibility

0 likes · 7 min read

Boost Emoji Picker Performance with CSS content-visibility

Sohu Tech Products

Aug 4, 2021 · Frontend Development

Optimizing Long List Rendering with CSS content-visibility

The article explains how the CSS content-visibility property can dramatically improve rendering performance of long lists by rendering only visible elements, demonstrates before‑and‑after benchmarks, discusses compatibility and edge‑case issues, and offers practical fixes such as contain‑intrinsic‑size.

FrontendPerformancebrowser compatibility

0 likes · 8 min read

Optimizing Long List Rendering with CSS content-visibility

Taobao Frontend Technology

Mar 23, 2021 · Frontend Development

How to Supercharge Web Rendering with CSS content-visibility, will-change & contain

This article explains how modern CSS features such as content-visibility, will-change, contain, font-display, scroll-behavior, @import avoidance, media‑query splitting, and CSS custom properties can be used together with practical code examples to dramatically reduce page‑render time, improve smooth scrolling, and avoid layout shifts for faster, smoother web experiences.

Performancecontaincontent-visibility

0 likes · 27 min read

How to Supercharge Web Rendering with CSS content-visibility, will-change & contain

WecTeam

Sep 11, 2020 · Frontend Development

Simulate Life with WebGL and Speed Up Pages Using CSS content-visibility

This week’s WecTeam Front‑end newsletter showcases a WebGL implementation of Conway’s Game of Life that treats the GPU as a parallel for‑loop accelerator, and introduces the CSS content-visibility:auto property, which lets browsers defer layout and rendering of off‑screen elements to dramatically improve initial page load performance.

Conway's Game of LifeGPU accelerationWebGL

0 likes · 2 min read

Simulate Life with WebGL and Speed Up Pages Using CSS content-visibility