跳到主要内容

content-visibility

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>