content-visibility 是一把低成本、高回报的性能利器。通过按需渲染让浏览器把计算资源聚焦在“用户眼前”，既提升首屏速度，也改善滚动与交互体验。 从下一次的长页面开始，把它纳入你的样式策略，立竿见影。
引言
长页面、信息密集、滚动迟滞？**content-visibility** 这项相对较新的 CSS 属性，允许浏览器跳过视口外元素的渲染工作，直到真正需要时再处理。 结果是：首屏更快，交互更顺，资源更省。
content-visibility是什么？
content-visibility决定元素内容是否参与渲染。合理设置后，可让浏览器延后对视口外元素的布局与绘制，从而节省时间与算力。
语法：
.element { content-visibility: auto;}
取值要点：
visible：默认行为，内容照常渲染。hidden：内容不渲染，且不会被无障碍技术读取。auto：浏览器按需渲染；靠近视口时再“即时处理”，从而优化性能。机制如何运作？
当元素设置为content-visibility: auto时：
视口外：跳过布局与绘制，延迟到需要时再渲染；即将入场：靠近视口时“临门一脚”完成渲染，滚动观感连贯自然。可以把它理解为CSS 级别的惰性加载：无需额外 JS，就能获得类似的收益。
真实收益能有多大？
得益于“可见即渲染”的策略，常见收益包括：
更快的首屏：浏览器把时间优先花在用户看得到的区域；更少的内存与计算：跳过无用功，压力显著下降；更流畅的交互：滚动与点击反馈更跟手。在将长内容分段并对每段应用content-visibility: auto的实践中，首屏渲染性能可出现最高约 7× 的提升（取决于页面结构与设备）。
