content-visibility: the new CSS property that boosts your rendering performance

Una Kravets and Vladimir Levin highlight the content-visibility CSS property as a powerful tool for enhancing rendering performance. They emphasize that setting content-visibility: auto; offers significant performance gains with minimal developer effort.

Their example demonstrates a dramatic improvement: rendering time reduced from 232ms to 30ms – a sevenfold increase in speed.

However, the process isn't entirely straightforward. Applying content-visibility requires manually sectioning large page areas, assigning content-visibility: auto;, and estimating their height using contain-intrinsic-size. This height estimation is a point of concern. The uncertainty around accurate height prediction, potential impact on performance if incorrect, and the need for viewport-specific adjustments raise questions about the practical application for developers without deep performance optimization expertise. The authors suggest that web performance optimization is a specialized skillset.

The above is the detailed content of content-visibility: the new CSS property that boosts your rendering performance. For more information, please follow other related articles on the PHP Chinese website!