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.
Introduction
Long list pages often suffer from slow rendering when the DOM contains many elements, negatively affecting user experience. Traditional solutions like virtual scrolling, pagination, or infinite scroll require substantial JavaScript or CSS logic. The new content-visibility CSS property enables similar optimizations with just a single line of CSS, significantly boosting initial render performance.
What is content-visibility?
content-visibility is a CSS property that controls whether an element renders its content, allowing the browser to skip layout and painting for elements that are not currently visible. It has three possible values:
visible : default; no effect on layout or rendering.
hidden : the element’s content is completely skipped, making it inaccessible to search, tab navigation, etc., similar to display:none .
auto : the browser renders the element normally when it is in the viewport; otherwise it skips rendering until the element becomes visible.
Performance Comparison
Before Using content-visibility
Code
<html>
<head>
<title>content-visibility</title>
<style type="text/css">
.card {
position: relative;
overflow: hidden;
transition-duration: 0.3s;
margin-bottom: 10px;
width: 200px;
height: 100px;
background-color: #ffaa00;
}
.card:before {
content: '';
position: absolute;
left: -665px;
top: -460px;
width: 300px;
height: 15px;
background-color: rgba(255, 255, 255, 0.5);
transform: rotate(-45deg);
animation: searchLights 2s ease-in 0s infinite;
}
@keyframes searchLights {
0% {}
75% { left: -100px; top: 0; }
100% { left: 120px; top: 100px; }
}
</style>
</head>
<body>
<div class="card"></div>
<!-- ... 97 more .card divs ... -->
<div class="card"></div>
</body>
</html>Rendering this page in Chrome takes about 1454 ms.
After Using content-visibility
Code
Adding content-visibility: auto; to the .card rule:
.card {
position: relative;
overflow: hidden;
transition-duration: 0.3s;
margin-bottom: 10px;
width: 200px;
height: 100px;
background-color: #ffaa00;
content-visibility: auto;
}
.card:before {
content: '';
// ...
}With this change, render time drops to roughly 381 ms—a near‑four‑fold improvement, and the benefit grows as element complexity increases.
Drawbacks
Compatibility
content-visibility was introduced in Chrome 85 (2020), so browser support is still limited. A compatibility table (omitted here) shows that only recent versions of Chromium‑based browsers fully support it.
Issues with Certain Elements
When an element’s size depends on its children—e.g., an <img> tag—the element may have an initial height of 0 when off‑screen. As the user scrolls and images load, the page height expands, causing scroll‑position glitches.
<html>
<head>
<title>content-visibility</title>
<style type="text/css">
.card { margin-bottom: 10px; content-visibility: auto; }
</style>
</head>
<body>
<div class="card">
<img src="..." alt="Dog" />
<img src="..." alt="Dog" />
</div>
</body>
</html>This results in a scrolling issue where the scrollbar jumps as images render.
Solution
If the element’s height is known, you can use contain-intrinsic-size to give it an initial size, mitigating the scroll‑jump problem:
<style type="text/css">
.card {
margin-bottom: 10px;
content-visibility: auto;
contain-intrinsic-size: 312px; /* add this line */
}
</style>After applying this, the scrollbar behaves correctly.
Conclusion
The content-visibility CSS property offers a powerful, one‑line way to replace more complex virtual‑scroll or lazy‑load implementations for long lists, delivering substantial performance gains. Although current browser support is limited and certain edge cases (e.g., image‑driven heights) require workarounds like contain-intrinsic-size , the feature is promising and likely to mature.
Sohu Tech Products
A knowledge-sharing platform for Sohu's technology products. As a leading Chinese internet brand with media, video, search, and gaming services and over 700 million users, Sohu continuously drives tech innovation and practice. We’ll share practical insights and tech news here.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.