跳到主要内容

认识

2023年08月11日
柏拉文
越努力,越幸运

一、认识


content-visibility 控制元素是否渲染其内容,以及施加一组强局限,由此允许用户代理有机会在不需要时省略大片的布局和渲染工作。此属性使用户代理得以在不需要时跳过元素的渲染工作(包括布局和绘制)——由此使页面的初始加载明显变快。

二、语法


/* 关键词值 */
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

/* 全局值 */
content-visibility: inherit;
content-visibility: initial;
content-visibility: revert;
content-visibility: revert-layer;
content-visibility: unset;

2.1 content-visibility: auto

content-visibility: auto 元素启用布局局限、样式局限和绘制局限。若元素不与用户相关,则元素还跳过其内容。与 hidden 不同的是,被跳过的内容必须仍可照常被例如页内查找和 tab 键顺序导航等用户代理特性访问,且必须照常可获得焦点或被选中。(也就是说: content-visibility: auto 对于用户可见区域的元素,浏览器会正常渲染其内容;对于不可见区域的元素,浏览器会暂时跳过其内容的呈现,等到其处于用户可见区域时,浏览器在渲染其内容。)

2.2 content-visibility: hidden

content-visibility: hidden 元素跳过其内容。被跳过的内容必须不可被例如页内查找和 tab 键顺序导航等用户代理特性访问,亦不可被选中或获得焦点。此值类似于为内容赋予 display: none

2.3 content-visibility: visible

content-visibility: visible 无效果。元素内容照常进行布局和渲染。

三、场景


3.1 content-visibility 虚拟滚动

<style>
li {
width: 100%;
height: 500px;
content-visibility: auto;
}
</style>


<ul></ul>
<script>
const startTime = Date.now();
function createLi(fragment, index) {
const li = document.createElement('li');
li.innerHTML = `第 ${index + 1} 个元素`;
fragment.appendChild(li);
}

const fragment = new DocumentFragment();
for (let i = 0; i < 100000; i++) {
createLi(fragment, i);
}

const ul = document.querySelector('ul');
ul.appendChild(fragment);
console.log('JS 运行时间为:', Date.now() - startTime);

setTimeout(() => {
console.log('JS 执行+页面渲染的时间为:', Date.now() - startTime);
},0);
</script>