一行css代码优化长列表

作者: 太_2_真_人 | 来源:发表于2021-06-09 17:02 被阅读0次

一行css代码优化长列表
CSS学习5
CSS样式优化（2019-02-18）
CSS flex布局最后一行列表左对齐方法
高性能php开发
如何用一行代码，让网页变为黑白配色
12月7日的web前端面试
一行调试CSS的JS代码
移动端优化

content-visibility

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

添加css前后渲染速度对比

before.png

after.png

使用

这里为每个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高度差不多的值，看起来就不会那么明显了。