前言

在渲染长列表的时候，经常有这样的需求：悬浮在列表的 item 上，会“高亮”显示当前的 hover 内容，虽然数据量少的时候没有明显的卡顿感受，但是如果数据量过大或者操作过于频繁，就会感受到页面有一点点的“呆滞”。

原因

直接动态添加 box-shadow 属性的时候，每一次操作都会进行重绘 (repaint)，会损耗页面渲染的性能。

优化方案

通过修改伪类元素的透明度来实现 box-shadow

原理：通过改变透明度，这样其实是从一个非默认值来更新它的值，不需要进行重绘。

写法对比

old

<div class="old"></div>
.old {
  padding: 20px;
  background-color: #ffffff;
  transition: 0.2s;
}
.old:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

new

<div class="new"></div>
  1. 设置一个空的伪元素，设置它的透明度为0
.new::after {
    content: "";
    position: absolute;  
    top: 0;
    right: 0;
    bottom: 0;  
    left: 0;
    z-index: -1;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    opacity: 0;
    will-change: opacity;
    transition: 0.2s;
}
  1. 通过鼠标悬停，恢复它的透明度
.new:hover::after {
  opacity: 1;
}

效果

image.png