关于javascript:一行css代码优化长列表

3次阅读

共计 978 个字符，预计需要花费 3 分钟才能阅读完成。

chrome85 新出的几个对性能优化最有用的 css 之一。优先渲染屏幕内的可视内容，对屏幕之外的内容（包含布局）达到条件（进入视图区域）进行渲染。不仅放慢了首屏渲染速度，更放慢了页面可交互的速度。

这里为每个 card 增加一个反光成果，通过上图能够显著看到增加前后的区别。

<html>

<head>
  <title>content-visibility</title>
  <style type="text/css">
    .card {
      content-visibility: auto;
      position: relative;
      overflow: hidden;
      transition-duration: 0.3s;
      margin-bottom: 10px;
      width: 200px;
      height: 100px;
      background-color: #ffaa00;
    }

    .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>
</head>

<body>
  <div class="card"></div>
  <!-- 这里有 1w 多个 <div class="card"></div> div 越多 成果越显著 -->
  <div class="card"></div>
</body>

这里还有个问题，下面的 .card 咱们为其增加了宽高属性，如果高度由子节点决定，这时滚动条是有问题的，这里咱们要配合应用 contain-intrainsic-size: 100px; 为其设置一个默认的跟实在 .card 高度差不多的值，看起来就不会那么显著了。

由图可见，此 css 属性目前兼容性并不是特地好，然而随着 chrome 的推动，置信这个属性肯定会失去更多浏览器的反对的。

正文完