background

With too many DOM elements, browser rendering can be slow and can be very disruptive to the user experience.

As a result, we often optimize using different methods such as virtual scrolling, paging, and pull-up loading. The idea is the same, rendering only the visible area and loading more content when the user needs it.

Either way, you need to write a lot of JS or CSS logic to achieve it. Now, we have one more way — Content-visibility.

Basic introduction

Content-visibility is a CSS property that controls whether an element presents its content, allowing users to potentially control the presentation of the element. Users can use it to skip the rendering of elements (including layout and drawing) until they need to, greatly improving the initial rendering of the page.

value

The content-visibility attribute has three optional values:

  • Visible: the default value. There is no impact on layout or rendering.

  • Hidden: The element skips the rendering of its content. User agent functions (for example, find in a page, Tab to navigate sequentially, etc.) do not access skipped content, nor can they select or focus. Similar to setting the display: None property on its contents.

  • Auto: For elements in the user’s visible area, the browser renders their contents normally. For elements that are not visible, the browser temporarily skips rendering of their content until they are visible to the user.

Use effect

Before using

Simply use 100 cards in a browser and animate them with sweep effects:

Rendering time was 1454ms

    <style>
      .card {
        position: relative;
        overflow: hidden;
        transition-duration: 0.3 s;
        margin-bottom: 10px;
        width: 200px;
        height: 100px;
        background-color: #ffaa00;
        content-visibility: auto;
      }
      .card:before {
        content: ' ';
        position: absolute;
        left: -665px;
        top: -460px;
        width: 300px;
        height: 15px;
        background-color: rgba(255.255.255.0.5);
        transform: rotate(-45deg);
        animation: searchLights 2s ease-in 0s infinite;
      }
      @keyframes searchLights {
        0%{}75% {
          left: -100px;
          top: 0;
        }
        100% {
          left: 120px;
          top: 100px; }}</style>
    
 <body>
    <div class="card"></div>. Many a div<div class="card"></div>
 </body>
Copy the code

After using

Class add content-visibility: auto to card; :

Render time is only 381ms

As you can also see from the DOM structure changes, when card is not in the visible area of the screen, its content (animations like ::before, etc.) does not appear until the element is visible

      .card{... Omit other codecontent-visibility: auto;
      }
Copy the code

disadvantages

compatibility

Content-visibility is a new feature for chrome85 this year, so it’s not compatible yet

Some elements cause browser rendering problems

The problem

When part of the content of an element, such as the tag, the height of the element is determined by the image content, so in this case, if you use content-visibility, the IMG outside the visible view is initially unrendered and has a height of 0. As the scroll bar slides down, the page height increases, causing scrolling problems.

    <style type="text/css">
      .card {
        margin-bottom: 10px;
        content-visibility: auto;
      }
    </style>
    
  <body>
    <div class="card">
      <img
        src="Https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1057266467, & FM = 26 & gp = 0. 784420394 JPG"
        alt="The dog"
      />
      <! -... -->
      <! -->
      <! -... -->
      <img
        src="Https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1057266467, & FM = 26 & gp = 0. 784420394 JPG"
        alt="The dog"
      />
    </div>
  </body>
Copy the code

solution

If the height of the element is known, you can use the contains-intrinsic-size attribute to add 312px to the card above. This appends the content to an initial height value. (If the height is not fixed, you can also attach a rough initial height value, which will reduce the scrollbar problem relatively).

This property is not recommended if the list item height is not fixed and the user’s scrollbar experience is very important

.card {
        margin-bottom: 10px;
        content-visibility: auto;
        contain-intrinsic-size: 312px; // Add line}Copy the code

Refer to the article: mp.weixin.qq.com/s/TUNoJCSSW…