content-visibility

![Published on webcomponents.org](https://www.webcomponents.org/element/content-visibility)
!npm 7.0.15
!Typescript
!Lit-Element

is a simple web component encapsulates modern CSS properties content-visibility and Web API Intersection Observer API to provide cross-browsers solution to skip rendering (layout & painting) elements until it is needed (appears on the viewport) to boosts page performance.

^{CSS content-visibility is only supported on Chrome 85+, Chrome Android 85+ and Opera 71+ but not Firefox, Safari and IE unfortunately, see web.dev. Intersection Observer API supports pretty much all browsers except IE, thus an intersection observer polyfill is included for compatible on IE.}

Basically, all children inside it will only be renderred after it appears on viewport.

``html {children will not be rendered when outside the first viewport}`

`Compatibility`

`Getting started`

`Install`

npm i content-visibility --save

`Use in JSX (React/Preact)`

`jsx import 'content-visibility';

const Content = () => { return (

...


      ...

      ...

    
  );
};


properties
$3

This is will be set as CSS custom variable for contain-intrinsic-size if browsers support it. see

`html {children}`

`Performance results`

`Rendering frames`

Safari comes with Rendering Frames Timeline tool helps to measure rendering performance. Let's have a look the rendering frames without , total 97rendering frames happened on the first view. !Rendering Frames - no content-visibility

Only 47 rendering frames happened on the first view after integrated with !Rendering Frames - content-visibility the rest of50rendering frames happened when scorlling to the viewport !Rendering Frames - content-visibility scroll

`Rendering & Layout time`

Generally speaking, we can plausibly say rendering & layout time improved around 40%, however benchmark results vary depends on sampling size, environments, tools, implementation and etc. Too many factors could impact benchmark results, so this is just a quick sample results to demonstrate the performance differences.