跑马灯的优化之旅：巧妙调整，险些升职加薪

2024-02-01 22:46:26

回想上周，我灵机一动地优化了一段跑马灯代码，险些让我升职加薪。

最初的跑马灯代码有一个明显的痛点：长度太长，导致每个节点过长，即使限制为最多 50 个项目，整体长度依然令人望而生畏。

为了解决这个问题，我开始审视原有的代码：

<div id="marquee">
  <ul>
    <li>项目 1</li>
    <li>项目 2</li>
    <!-- ......省略 48 个项目 -->
  </ul>
</div>

#marquee {
  width: 100%;
  height: 50px;
  overflow: hidden;
  white-space: nowrap;
}

#marquee ul {
  display: inline-flex;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

问题一目了然：由于 ul 元素采用 inline-flex 布局，每个项目节点都会被渲染为独立的一行，导致整体长度过长。

于是，我决定将 ul 元素的布局改为 flex，并将 li 元素的宽度设置为固定值：

#marquee ul {
  display: flex;
  flex-direction: row;
  width: calc(50px * 50);
}

#marquee li {
  width: 50px;
}

通过这些调整，跑马灯的长度被成功缩短，每个项目节点也整齐排列在一行中。

接下来，我继续优化代码的性能。注意到动画效果是通过 CSS transform 属性实现的，我意识到可以使用 GPU 加速来提升性能。

#marquee ul {
  transform: translateX(-100%);
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}